@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
 --ink:#163642;--deep:#092f3d;--teal:#087f83;--aqua:#bfece2;--mint:#e9f7f2;
 --paper:#f6f8f5;--white:#fff;--muted:#637b81;--line:#e3ece8;--sun:#f2c66d;
 --shadow:0 18px 55px rgba(8,47,61,.09)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 'DM Sans',sans-serif}
a{color:inherit}
.topline{height:5px;background:linear-gradient(90deg,#0b5362,#14a49a,#d6bd79)}
.shell{max-width:1120px;margin:auto;padding:24px 26px 70px}
.hero{min-height:500px;border-radius:30px;overflow:hidden;position:relative;color:#fff;background:
 radial-gradient(ellipse at 80% 20%,rgba(70,190,170,.42),transparent 34%),
 radial-gradient(ellipse at 78% 100%,rgba(20,113,128,.65),transparent 38%),
 linear-gradient(120deg,#092f3d 0%,#0d4653 58%,#087f83 100%);
 box-shadow:0 28px 70px rgba(8,47,61,.2);display:flex;align-items:center
}
.hero:before{content:"";position:absolute;width:520px;height:520px;border:1px solid #ffffff20;border-radius:50%;right:-60px;top:-140px}
.hero:after{content:"";position:absolute;width:390px;height:390px;border:1px solid #ffffff20;border-radius:50%;right:5px;top:-75px}
.hero-copy{position:relative;z-index:2;width:62%;padding:58px 62px}
.brand{display:flex;align-items:center;gap:11px;font:800 12px 'Manrope',sans-serif;letter-spacing:2.4px;text-transform:uppercase}
.brand-symbol{height:38px;width:38px;border:1px solid #ffffff75;border-radius:13px;display:grid;place-items:center;color:var(--aqua);font-size:20px}
.overline{margin:48px 0 13px;color:#bce9df;font-size:11px;letter-spacing:3px;text-transform:uppercase;font-weight:800}
h1{font:800 clamp(43px,6vw,72px)/.99 'Manrope',sans-serif;letter-spacing:-3.5px;margin:0 0 22px}
.hero-copy>p{max-width:510px;color:#d9eeea;font-size:17px;line-height:1.7;margin:0}
.hero-label{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:10px 15px;border-radius:40px;border:1px solid #ffffff40;background:#ffffff12;color:#e9fbf6;font-size:12px;font-weight:700}
.hero-visual{position:absolute;right:4%;bottom:7%;width:37%;height:75%;z-index:1}
.sun-disc{position:absolute;right:17%;top:2%;width:155px;height:155px;border-radius:50%;background:linear-gradient(135deg,#f7dc9b,#dba95d);opacity:.95;box-shadow:0 0 80px #f3ca7b55}
.mountain{position:absolute;bottom:0;filter:drop-shadow(0 15px 16px #062d3b35)}
.mountain.back{right:-6%;width:112%;height:72%;background:linear-gradient(145deg,#4ca69b,#1a6c75);clip-path:polygon(0 100%,22% 40%,36% 64%,57% 15%,77% 60%,91% 39%,100% 59%,100% 100%)}
.mountain.front{right:-12%;width:115%;height:52%;background:linear-gradient(145deg,#b4dfc9,#4d9d91);clip-path:polygon(0 100%,20% 46%,35% 73%,59% 20%,78% 67%,91% 44%,100% 58%,100% 100%)}
.route{position:absolute;right:13%;top:32%;width:70%;height:28%;border:2px dashed #ffffff80;border-color:#ffffff80 transparent transparent;border-radius:50%;transform:rotate(-20deg)}
.route:after{content:"✦";position:absolute;right:8%;top:-18px;color:#fff;font-size:25px}
.welcome{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin:20px 0 32px}
.welcome-main{background:#fff;border:1px solid var(--line);border-radius:23px;padding:27px 30px;box-shadow:var(--shadow)}
.welcome-main .mini{color:var(--teal);font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase}
.welcome-main h2{font:800 25px/1.2 'Manrope',sans-serif;color:var(--deep);margin:8px 0 10px;letter-spacing:-.8px}
.welcome-main p{margin:0;color:#587078}
.welcome-side{border-radius:23px;padding:25px 26px;background:linear-gradient(135deg,#e5f5ef,#d8efeb);display:flex;flex-direction:column;justify-content:center}
.welcome-side .big-icon{font-size:34px;margin-bottom:7px}
.welcome-side strong{font:800 17px 'Manrope',sans-serif;color:#0b5961}
.welcome-side p{margin:6px 0 0;color:#46666b;font-size:13px}
.nav{position:sticky;top:10px;z-index:20;display:flex;gap:7px;flex-wrap:wrap;padding:10px;margin:0 0 28px;background:#f6f8f5e8;backdrop-filter:blur(16px);border:1px solid #e1eae5;border-radius:18px}
.nav a{text-decoration:none;font-size:11px;font-weight:800;color:#42616a;padding:8px 12px;border-radius:10px;transition:.2s}
.nav a:hover,.nav a.active{background:var(--deep);color:#fff}
.section{margin:22px 0;background:#fff;border:1px solid var(--line);border-radius:25px;padding:32px;box-shadow:0 12px 36px rgba(8,47,61,.045)}
.section-head{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.section-icon{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:grid;place-items:center;background:var(--mint);color:var(--teal);font-size:23px}
.kicker{font-size:10px;color:var(--teal);font-weight:800;letter-spacing:2px;text-transform:uppercase}
h2{font:800 27px/1.2 'Manrope',sans-serif;letter-spacing:-1px;color:var(--deep);margin:3px 0 0}
.lead{color:#5b737a;margin:-7px 0 21px;max-width:760px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{position:relative;border:1px solid var(--line);border-radius:17px;padding:18px 16px;background:linear-gradient(160deg,#fff,#f8fbf9);min-height:190px;transition:.25s}
.step:hover,.pack:hover,.info-tile:hover{transform:translateY(-5px);box-shadow:0 17px 32px #123b4814;border-color:#b7ddd3}
.step-num{height:29px;width:29px;border-radius:10px;background:var(--deep);color:white;display:grid;place-items:center;font-size:12px;font-weight:800;margin-bottom:15px}
.step-emoji{font-size:23px;position:absolute;right:15px;top:15px}
.step h3,.pack h3{font:800 14px 'Manrope',sans-serif;color:var(--deep);margin:0 0 7px}
.step p{font-size:12px;color:var(--muted);margin:0}
.callout{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;background:#edf8f5;border:1px solid #d7eee7;border-radius:15px;margin-top:17px;font-size:13px;color:#355a62}
.callout .symbol{font-size:22px;line-height:1.3}
.callout.gold{background:#fff8e9;border-color:#f4e4bd}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.info-tile{display:flex;gap:13px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:15px;background:#fbfdfc;transition:.25s}
.info-tile .tile-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#e6f5ef;display:grid;place-items:center;font-size:21px}
.info-tile strong{display:block;font:800 13px 'Manrope',sans-serif;color:var(--deep)}
.info-tile span{font-size:11px;color:var(--muted);display:block}
.payment-band{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
.payment-card{border-radius:18px;padding:20px;background:linear-gradient(135deg,#0c3a48,#0d6670);color:white}
.payment-card:nth-child(2){background:linear-gradient(135deg,#e6f5ef,#d6eee7);color:var(--deep)}
.payment-card .emoji{font-size:26px}
.payment-card small{display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;opacity:.8;margin:7px 0}
.payment-card strong{font:800 22px 'Manrope',sans-serif}
.payment-card p{font-size:12px;margin:5px 0 0;opacity:.83}
.transport{display:grid;grid-template-columns:1fr 170px;gap:20px;align-items:center;padding:23px;border-radius:19px;background:linear-gradient(110deg,#edf7f4,#f5f9f7)}
.bus-art{font-size:90px;text-align:center;filter:drop-shadow(0 9px 5px #0c485022)}
.transport p{margin:0;color:#506c72}
.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pack{border:1px solid var(--line);border-radius:19px;padding:20px;transition:.25s;background:white}
.pack:nth-child(2){background:linear-gradient(150deg,#f8fcfb,#eef8f4)}
.pack:nth-child(3){background:linear-gradient(150deg,#f2fbfb,#edf6fc)}
.pack:nth-child(4){background:linear-gradient(150deg,#fbfaf5,#f5f1e8)}
.pack-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.pack-icon{height:45px;width:45px;border-radius:14px;background:#e5f5ee;display:grid;place-items:center;font-size:23px}
.pack .sub{font-size:10px;color:var(--teal);font-weight:800;letter-spacing:1px;text-transform:uppercase}
.pack ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
.pack li{font-size:11px;color:#506a70;line-height:1.45}
.pack li:before{content:"✓";color:#07827e;font-weight:900;margin-right:6px}
.departure-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.departure{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fbfdfc}
.departure .d-icon{font-size:24px}
.departure strong{display:block;font:800 13px 'Manrope',sans-serif;color:var(--deep);margin:6px 0}
.departure p{font-size:11px;color:var(--muted);margin:0}
.terms{background:#f8faf8;border-radius:15px;padding:19px;color:#526b71;font-size:13px}
.contact{position:relative;overflow:hidden;border-radius:26px;padding:38px;text-align:center;color:white;background:
 radial-gradient(circle at 15% 15%,#ffffff18,transparent 25%),
 linear-gradient(120deg,#092f3d,#0c6970)}
.contact .kicker{color:#bce9df}
.contact h2{font-size:32px;color:#fff;margin:8px 0 10px}
.contact p{color:#d9eeea;margin:0 auto 16px;max-width:560px}
.whatsapp{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:40px;background:#fff;color:#075b5d;text-decoration:none;font:800 14px 'Manrope',sans-serif;box-shadow:0 10px 25px #001f2c35;transition:.2s}
.whatsapp:hover{transform:translateY(-3px) scale(1.02)}
.receipt-number{font-size:12px;color:#c6e8e1;margin-top:14px}
.footer{text-align:center;color:#7b9093;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:28px 0 0}
.float-wa{position:fixed;right:22px;bottom:22px;z-index:30;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#087f73;color:white;text-decoration:none;font-size:26px;box-shadow:0 10px 28px #063c3e45;transition:.2s}
.float-wa:hover{transform:translateY(-4px) scale(1.06)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.show{opacity:1;transform:none}
@media(max-width:800px){
 .shell{padding:14px 13px 45px}.hero{min-height:570px;align-items:flex-start;border-radius:24px}
 .hero-copy{width:100%;padding:34px 28px 245px}.overline{margin-top:35px}
 .hero-visual{width:72%;height:48%;right:7%;bottom:-2%}
 .sun-disc{width:110px;height:110px}.welcome{grid-template-columns:1fr}
 .timeline{grid-template-columns:repeat(2,1fr)}.step{min-height:165px}
 .section{padding:23px 19px}.departure-list{grid-template-columns:1fr 1fr}
 .nav{top:5px}.nav a{font-size:10px;padding:7px 9px}
}
@media(max-width:520px){
 h1{font-size:48px;letter-spacing:-2.5px}.hero-copy{padding:30px 22px 225px}.hero-copy>p{font-size:14px}
 .timeline,.tiles,.payment-band,.pack-grid{grid-template-columns:1fr}
 .step{min-height:0}.pack ul{grid-template-columns:1fr 1fr}
 .transport{grid-template-columns:1fr}.bus-art{display:none}
 .departure-list{grid-template-columns:1fr}
 .section-head{gap:11px}.section-icon{width:42px;height:42px;flex-basis:42px}
 h2{font-size:23px}.contact{padding:30px 20px}
 .float-wa{width:50px;height:50px;right:14px;bottom:14px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media print{.nav,.float-wa{display:none}.reveal{opacity:1;transform:none}.hero,.section,.welcome-main,.welcome-side,.contact{break-inside:avoid;box-shadow:none}.shell{padding:0}.hero{min-height:350px}}

.brand-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;padding:8px 13px;border-radius:15px;box-shadow:0 10px 28px #001f2c35;max-width:285px;animation:logoArrive .8s cubic-bezier(.2,.8,.2,1) both}
.brand-logo img{display:block;width:100%;height:auto;max-height:155px;object-fit:contain}
@keyframes logoArrive{from{opacity:0;transform:translateY(-12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:800px){.brand-logo{max-width:235px}.brand-logo img{max-height:125px}}


.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trust-card{padding:18px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(150deg,#fff,#f6fbf8)}
.trust-card .trust-icon{font-size:27px;margin-bottom:9px}
.trust-card strong{display:block;font:800 13px 'Manrope',sans-serif;color:var(--deep);margin-bottom:5px}
.trust-card p{font-size:12px;color:var(--muted);margin:0}
.appointment-banner{display:flex;align-items:center;gap:16px;padding:20px;border-radius:18px;background:linear-gradient(120deg,#0b3948,#087f83);color:#fff;margin-top:16px}
.appointment-banner .appointment-icon{font-size:34px}
.appointment-banner strong{display:block;font:800 15px 'Manrope',sans-serif}
.appointment-banner p{margin:3px 0 0;color:#d9eeea;font-size:12px}
.response-note{display:flex;gap:13px;padding:17px;border-radius:16px;background:#fff7e8;border:1px solid #f1e1b9;color:#5f512e}
.response-note .response-icon{font-size:25px}
.response-note p{font-size:13px;margin:0}
@media(max-width:800px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}.appointment-banner{align-items:flex-start}}


/* Mobile-first refinements */
.nav a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav a span{font-size:14px;line-height:1}
.section-icon{box-shadow:inset 0 0 0 1px #d8eee6}
.step-emoji,.pack-icon,.tile-icon,.departure .d-icon{filter:drop-shadow(0 3px 2px rgba(10,60,70,.10))}
@media(max-width:800px){
 .shell{width:100%;padding:10px 10px calc(34px + env(safe-area-inset-bottom))}
 .hero{min-height:525px;border-radius:20px}
 .hero-copy{padding:29px 22px 220px}
 .brand{font-size:11px;letter-spacing:1.8px}
 .brand-symbol{width:35px;height:35px}
 .overline{margin:32px 0 12px;font-size:10px}
 .hero-label{font-size:10px;padding:9px 12px}
 .hero-visual{width:78%;height:46%;right:2%;bottom:-2%}
 .welcome{gap:10px;margin:12px 0 18px}
 .welcome-main,.welcome-side{padding:20px;border-radius:18px}
 .welcome-main h2{font-size:22px}
 .welcome-main p{font-size:13px;line-height:1.65}
 .welcome-side .big-icon{font-size:28px}
 .nav{position:sticky;top:4px;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:5px;margin:0 -1px 17px;padding:8px;border-radius:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:0 6px 18px #092f3d12}
 .nav::-webkit-scrollbar{display:none}
 .nav a{flex:0 0 auto;min-height:38px;padding:9px 11px;font-size:11px;border-radius:10px}
 .section{margin:13px 0;padding:20px 16px;border-radius:19px}
 .section-head{gap:11px;margin-bottom:17px}
 .section-icon{width:41px;height:41px;flex-basis:41px;border-radius:13px;font-size:20px}
 .kicker{font-size:9px;letter-spacing:1.5px}
 .section h2{font-size:22px;letter-spacing:-.6px}
 .lead{font-size:13px;line-height:1.6;margin:-5px 0 16px}
 .timeline{gap:9px}
 .step{padding:14px 12px;border-radius:14px}
 .step-num{margin-bottom:11px}
 .step-emoji{font-size:19px;right:11px;top:12px}
 .step h3{font-size:12px}
 .step p{font-size:11px;line-height:1.5}
 .callout{padding:13px;border-radius:13px;font-size:12px;gap:9px}
 .callout .symbol{font-size:19px}
 .tiles{gap:8px}
 .info-tile{padding:11px;border-radius:13px;gap:10px}
 .tile-icon{height:37px;width:37px;flex-basis:37px;font-size:18px}
 .info-tile strong{font-size:12px}
 .info-tile span{font-size:10px;line-height:1.45}
 .payment-band{gap:9px;margin:13px 0}
 .payment-card{padding:16px;border-radius:15px}
 .payment-card strong{font-size:20px}
 .transport{padding:16px;border-radius:15px}
 .transport p{font-size:13px;line-height:1.6}
 .pack-grid{gap:10px}
 .pack{padding:16px;border-radius:16px}
 .pack-head{gap:10px;margin-bottom:10px}
 .pack-icon{height:40px;width:40px;flex-basis:40px;font-size:21px}
 .pack h3{font-size:13px}
 .pack li{font-size:11px}
 .departure-list{gap:8px}
 .departure{padding:13px;border-radius:14px}
 .departure .d-icon{font-size:21px}
 .departure strong{font-size:12px}
 .departure p{font-size:10px;line-height:1.5}
 .terms{padding:15px;font-size:12px;line-height:1.6}
 .contact{padding:27px 18px;border-radius:20px}
 .contact h2{font-size:27px}
 .contact p{font-size:13px}
 .whatsapp{width:100%;justify-content:center;min-height:48px;font-size:13px}
 .float-wa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));width:52px;height:52px;font-size:24px}
 .footer{font-size:9px;line-height:1.8;padding-top:20px}
}
@media(max-width:390px){
 .hero{min-height:495px}
 .hero-copy{padding:25px 18px 205px}
 .hero h1{font-size:43px;letter-spacing:-2.7px}
 .hero-copy>p{font-size:13px}
 .timeline{grid-template-columns:1fr}
 .step{min-height:0;padding:14px 15px}
 .step p{font-size:12px}
 .pack ul{grid-template-columns:1fr}
 .pack li{font-size:12px}
 .section h2{font-size:20px}
 .payment-card strong{font-size:18px}
}
@media(hover:none){
 .step:hover,.pack:hover,.info-tile:hover{transform:none;box-shadow:none}
}



/* ==========================================================
   TURISMO MEDELLÍN · PREMIUM REFINEMENT
   Responsive, accessible and lightweight visual enhancements
   ========================================================== */
:root {
  --ink: #173b46;
  --deep: #082f3d;
  --teal: #087f83;
  --aqua: #c9eee5;
  --mint: #edf8f3;
  --paper: #f4f8f6;
  --muted: #637b81;
  --line: #e2ece7;
  --sun: #f2c66d;
  --shadow: 0 18px 48px rgba(8,47,61,.075);
  --shadow-hover: 0 24px 52px rgba(8,47,61,.12);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse at 5% 10%, rgba(191,236,226,.22), transparent 28rem),
    radial-gradient(ellipse at 95% 48%, rgba(8,127,131,.045), transparent 32rem),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.topline {
  height: 5px;
  background: linear-gradient(90deg, #0a3a49 0%, #078d89 48%, #a8d9c8 78%, #e4bd71 100%);
}
.shell { max-width: 1180px; }
.hero {
  min-height: 535px;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 17%, rgba(124,219,194,.26), transparent 24%),
    radial-gradient(circle at 90% 88%, rgba(15,150,143,.34), transparent 34%),
    linear-gradient(118deg, #082e3c 0%, #0b4653 54%, #087d7d 100%);
}
.hero-copy { width: 65%; }
.hero h1 { text-wrap: balance; }
.hero-copy > p { max-width: 535px; }
.hero-label {
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.hero-visual { pointer-events: none; }
.sun-disc { animation: sunFloat 7s ease-in-out infinite; }
.mountain.front { animation: mountainFloat 9s ease-in-out infinite; }
@keyframes sunFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes mountainFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.brand-logo {
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 14px 34px rgba(0,20,28,.22);
}
.welcome { align-items: stretch; }
.welcome-main, .welcome-side, .section {
  box-shadow: var(--shadow);
}
.welcome-main { border-radius: 22px; }
.welcome-side {
  border: 1px solid rgba(8,127,131,.10);
  position: relative;
  overflow: hidden;
}
.welcome-side:after {
  content: "✦";
  position: absolute;
  right: 20px;
  bottom: -27px;
  font-size: 112px;
  line-height: 1;
  color: rgba(8,127,131,.08);
}
.nav {
  box-shadow: 0 10px 28px rgba(8,47,61,.075);
  border-color: rgba(218,232,225,.95);
}
.nav a { transition: background .22s ease, color .22s ease, transform .22s ease; }
.nav a:hover { transform: translateY(-1px); }
.section {
  border-radius: 23px;
  border-color: rgba(222,235,228,.9);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.section-head { align-items: center; }
.section-icon {
  background: linear-gradient(145deg, #e8f7f0, #d9f0e9);
}
.step, .pack, .info-tile, .departure, .trust-card {
  border-color: #e3ede8;
}
.step, .pack, .trust-card, .departure {
  box-shadow: 0 5px 18px rgba(8,47,61,.025);
}
.step:hover, .pack:hover, .info-tile:hover, .trust-card:hover, .departure:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #b9ded2;
}
.callout {
  box-shadow: inset 3px 0 0 #7fc8b5;
}
.callout.gold { box-shadow: inset 3px 0 0 #e4bd71; }
.payment-card {
  position: relative;
  overflow: hidden;
}
.payment-card:after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border: 1px solid currentColor;
  opacity: .09;
  border-radius: 50%;
  right: -45px;
  bottom: -68px;
}
.appointment-banner {
  box-shadow: 0 12px 28px rgba(8,47,61,.12);
}
.appointment-banner a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff;
  color: #075b5d;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.appointment-banner a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.13);
}
.contact {
  box-shadow: 0 22px 55px rgba(8,47,61,.18);
}
.whatsapp {
  min-height: 50px;
  padding-inline: 25px;
}
.float-wa {
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(6,60,62,.28);
}
.footer { letter-spacing: 1.2px; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #e8bd69;
  outline-offset: 4px;
  border-radius: 8px;
}
::selection { background: #c9eee5; color: #082f3d; }

/* Reading progress indicator */
.reading-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #0b8f89, #e7bf73);
  box-shadow: 0 1px 8px rgba(8,127,131,.25);
}

/* Subtle entrance animation */
@keyframes softRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: softRise .7s both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }

@media (min-width: 1000px) {
  .section { padding: 36px; }
  .timeline { gap: 15px; }
  .step { padding: 21px 19px; }
}
@media (max-width: 800px) {
  .hero { min-height: 550px; }
  .hero-copy { width: 100%; }
  .hero-visual { opacity: .92; }
  .section { box-shadow: 0 9px 28px rgba(8,47,61,.055); }
  .nav { background: rgba(247,250,248,.94); }
}
@media (max-width: 520px) {
  .hero { min-height: 515px; }
  .hero-copy { padding-bottom: 215px; }
  .brand-logo { max-width: 205px; }
  .welcome-main h2 { line-height: 1.22; }
  .appointment-banner { flex-direction: row; }
  .appointment-banner p { line-height: 1.55; }
  .appointment-banner a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .sun-disc, .mountain.front { animation: none !important; }
  .step, .pack, .info-tile, .trust-card, .departure, .whatsapp { transition: none !important; }
}




/* ==========================================================
   MOBILE REBUILD · Ajustes prioritarios para teléfonos
   Sobrescribe reglas anteriores para evitar conflictos.
   ========================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  scroll-padding-top: 82px;
  -webkit-text-size-adjust: 100%;
}
body {
  width: 100%;
  max-width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; }
main, header, section, footer, nav, .shell,
.welcome, .welcome-main, .welcome-side, .section,
.section-head, .section-head > div:last-child,
.step, .pack, .trust-card, .departure,
.payment-card, .transport, .contact {
  min-width: 0;
}
p, li, a, h1, h2, h3, strong {
  overflow-wrap: anywhere;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { touch-action: manipulation; }

@media (max-width: 800px) {
  html { scroll-padding-top: 12px; }
  .shell {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px calc(28px + env(safe-area-inset-bottom));
    margin: 0 auto;
  }

  /* Hero: contenido legible primero, ilustración como apoyo abajo. */
  .hero {
    display: block;
    position: relative;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
    border-radius: 22px;
    padding: 0;
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 25px 21px 205px;
  }
  .brand-logo {
    display: inline-flex;
    max-width: min(205px, 75%);
    padding: 7px 10px;
    border-radius: 12px;
  }
  .brand-logo img {
    width: auto;
    max-width: 100%;
    max-height: 88px;
    object-fit: contain;
  }
  .overline {
    margin: 25px 0 10px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 1.8px;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(39px, 11vw, 54px);
    line-height: .99;
    letter-spacing: -2.4px;
    margin: 0 0 14px;
  }
  .hero-copy > p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
  }
  .hero-label {
    max-width: 100%;
    white-space: normal;
    line-height: 1.45;
    margin-top: 17px;
    padding: 9px 11px;
    font-size: 10px;
  }
  .hero-visual {
    display: block;
    position: absolute;
    z-index: 1;
    width: 76%;
    height: 205px;
    right: 0;
    bottom: -3px;
    opacity: .88;
  }
  .sun-disc {
    width: 88px;
    height: 88px;
    right: 15%;
    top: 0;
  }
  .mountain.back { height: 68%; }
  .mountain.front { height: 49%; }

  /* Welcome cards stack without squeezing their text. */
  .welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0 16px;
  }
  .welcome-main, .welcome-side {
    width: 100%;
    padding: 19px 17px;
    border-radius: 17px;
  }
  .welcome-main h2 {
    font-size: 21px;
    line-height: 1.25;
  }
  .welcome-main p, .welcome-side p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Scrollable section tabs: large enough to tap, never force page width. */
  .nav {
    position: sticky;
    top: 4px;
    z-index: 25;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    margin: 0 0 14px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 13px;
    background: rgba(247, 250, 248, .97);
    backdrop-filter: blur(12px);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    scroll-snap-align: start;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1;
  }

  /* Sections and headings. */
  .section {
    width: 100%;
    margin: 12px 0;
    padding: 19px 15px;
    border-radius: 18px;
  }
  .section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
  }
  .section-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border-radius: 12px;
    font-size: 19px;
  }
  .kicker {
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: 1.35px;
  }
  .section h2 {
    font-size: clamp(19px, 5.4vw, 23px);
    line-height: 1.2;
    letter-spacing: -.55px;
    margin-top: 3px;
  }
  .lead {
    margin: -3px 0 15px;
    font-size: 13px;
    line-height: 1.6;
  }

  /* One comfortable column on narrow screens. */
  .timeline,
  .tiles,
  .payment-band,
  .pack-grid,
  .departure-list,
  .trust-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }
  .step {
    min-height: 0;
    padding: 15px 14px;
    border-radius: 14px;
  }
  .step-num { margin-bottom: 10px; }
  .step h3 { font-size: 13px; line-height: 1.35; }
  .step p { font-size: 12px; line-height: 1.55; }

  .info-tile {
    width: 100%;
    padding: 12px;
    gap: 10px;
    border-radius: 13px;
  }
  .info-tile .tile-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }
  .info-tile strong { font-size: 12px; line-height: 1.4; }
  .info-tile span { font-size: 11px; line-height: 1.5; }

  .payment-card {
    width: 100%;
    padding: 16px;
    border-radius: 15px;
  }
  .payment-card strong { font-size: 20px; }
  .payment-card p { font-size: 12px; line-height: 1.55; }

  .transport {
    display: block;
    width: 100%;
    padding: 16px;
    border-radius: 15px;
  }
  .transport p { font-size: 13px; line-height: 1.65; }
  .bus-art { display: none; }

  .pack {
    width: 100%;
    padding: 15px;
    border-radius: 15px;
  }
  .pack-head { align-items: center; }
  .pack h3 { font-size: 13px; line-height: 1.4; }
  .pack ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .pack li { font-size: 12px; line-height: 1.5; }

  .departure {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
  }
  .departure strong { font-size: 13px; }
  .departure p { font-size: 11px; line-height: 1.55; }

  .trust-card {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
  }
  .trust-card strong { font-size: 13px; }
  .trust-card p { font-size: 12px; line-height: 1.55; }

  .callout, .response-note {
    align-items: flex-start;
    gap: 9px;
    padding: 13px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.6;
  }
  .callout > div, .response-note p { min-width: 0; }
  .terms {
    padding: 14px;
    font-size: 12px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }
  .terms a { word-break: break-word; }

  /* Appointment banner and contact buttons fit the screen. */
  .appointment-banner {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    padding: 15px;
    border-radius: 15px;
  }
  .appointment-banner .appointment-icon {
    flex: 0 0 auto;
    font-size: 27px;
  }
  .appointment-banner > div { min-width: 0; }
  .appointment-banner strong { font-size: 13px; line-height: 1.4; }
  .appointment-banner p { font-size: 11px; line-height: 1.55; }
  .appointment-banner a {
    width: 100%;
    min-height: 43px;
    padding: 10px;
    text-align: center;
    font-size: 11px;
  }
  .contact {
    width: 100%;
    padding: 25px 17px;
    border-radius: 18px;
  }
  .contact h2 {
    font-size: clamp(23px, 7vw, 29px);
    line-height: 1.15;
  }
  .contact p { font-size: 13px; line-height: 1.65; }
  .whatsapp {
    display: flex;
    width: 100%;
    min-height: 49px;
    justify-content: center;
    text-align: center;
    padding: 12px 14px;
    white-space: normal;
    font-size: 12px;
    line-height: 1.4;
  }
  .receipt-number { font-size: 11px; line-height: 1.6; }
  .float-wa {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: 49px;
    height: 49px;
    z-index: 40;
  }
  .footer { font-size: 9px; line-height: 1.7; }
}

@media (min-width: 430px) and (max-width: 800px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles, .departure-list, .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pack ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  .shell { padding-left: 9px; padding-right: 9px; }
  .hero-copy { padding: 22px 17px 190px; }
  .hero h1 { font-size: 41px; letter-spacing: -2px; }
  .hero-visual { width: 79%; height: 185px; }
  .section { padding: 17px 13px; }
  .section-head { gap: 8px; }
  .section-icon { width: 35px; height: 35px; flex-basis: 35px; }
  .section h2 { font-size: 19px; }
  .nav a { padding: 9px 10px; }
  .timeline, .tiles, .payment-band, .pack-grid,
  .departure-list, .trust-grid, .pack ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 340px) {
  .hero h1 { font-size: 37px; }
  .hero-copy > p { font-size: 13px; }
  .section-head { align-items: flex-start; }
  .section h2 { font-size: 18px; }
  .nav a { font-size: 10px; }
}

/* Prevent invisible sections if an animation observer is unavailable. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}