/* ═══════════════════════════════════════════
   Cenotes Homún — como-llegar.css
   Estilos específicos de como-llegar.html
   El CSS global está en assets/style.css
═══════════════════════════════════════════ */

.page-hero{background:linear-gradient(160deg,#0d2b1e,#1a3a2a,#0a4a52);padding:72px 48px}
.page-hero-inner{max-width:740px;margin:0 auto}
.breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:20px}
.breadcrumb a{color:rgba(245,237,224,0.5);font-size:0.8rem;text-decoration:none}
.breadcrumb span{color:rgba(245,237,224,0.3);font-size:0.8rem}
.page-tag{display:inline-block;background:rgba(10,157,168,0.2);color:var(--agua-light);font-size:0.75rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;padding:5px 14px;border-radius:20px;margin-bottom:20px;border:1px solid rgba(127,227,232,0.2)}
.page-title{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem);color:var(--arena);line-height:1.2;margin-bottom:16px}
.page-title em{font-style:italic;color:var(--agua-light)}
.page-sub{color:rgba(245,237,224,0.65);font-size:1rem;line-height:1.7}

/* DISTANCES */
.distances-bar{background:white;border-bottom:1px solid rgba(0,0,0,0.07);padding:20px 48px}
.distances-inner{max-width:900px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap}
.dist-item{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:#555}
.dist-badge{background:rgba(10,157,168,0.1);color:var(--agua-deep);font-weight:600;padding:4px 10px;border-radius:6px;font-size:0.82rem;white-space:nowrap}

/* CONTENT */
.page-content{max-width:900px;margin:0 auto;padding:64px 48px}
.route-section{margin-bottom:56px}
.route-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.route-icon{width:52px;height:52px;border-radius:12px;background:var(--selva);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.route-title-group{}
.route-title{font-family:'Playfair Display',serif;font-size:1.6rem;color:var(--selva)}
.route-meta{font-size:0.82rem;color:#999;margin-top:2px}

.origin-card{background:var(--gris);border-radius:12px;padding:28px;margin-bottom:16px;border:1px solid rgba(0,0,0,0.06)}
.origin-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.origin-name{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--selva)}
.origin-badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:0.72rem;font-weight:600;padding:4px 10px;border-radius:10px;letter-spacing:0.04em}
.badge-time{background:rgba(10,157,168,0.12);color:var(--agua-deep)}
.badge-km{background:rgba(26,58,42,0.08);color:var(--selva)}

.steps-list{list-style:none}
.step-item{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.05);align-items:start}
.step-item:last-child{border-bottom:none}
.step-num-small{width:28px;height:28px;background:var(--agua);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;margin-top:1px}
.step-text{font-size:0.9rem;color:#444;line-height:1.5}
.step-text strong{color:var(--selva)}

.tip-box{background:rgba(10,157,168,0.07);border-left:3px solid var(--agua);border-radius:0 8px 8px 0;padding:14px 18px;margin:16px 0}
.tip-title{font-size:0.72rem;font-weight:600;color:var(--agua);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px}
.tip-box p{font-size:0.88rem;color:#555;margin:0;line-height:1.6}

.map-placeholder{background:linear-gradient(135deg,#0d2b1e,#0a4a52);border-radius:16px;padding:60px 40px;text-align:center;margin:40px 0;position:relative;overflow:hidden}
.map-placeholder::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,157,168,0.2),transparent 70%)}
.map-inner{position:relative;z-index:1}
.map-icon{font-size:3rem;margin-bottom:16px}
.map-title{font-family:'Playfair Display',serif;color:var(--arena);font-size:1.3rem;margin-bottom:8px}
.map-sub{color:rgba(245,237,224,0.6);font-size:0.88rem;margin-bottom:20px}
.map-btn{display:inline-block;background:var(--agua);color:white;text-decoration:none;padding:11px 24px;border-radius:6px;font-size:0.88rem;font-weight:500;transition:background 0.3s}
.map-btn:hover{background:var(--agua-deep)}

/* COORDS */
.coords-box{background:var(--selva);border-radius:12px;padding:24px;margin:24px 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.coords-icon{font-size:2rem}
.coords-text h4{font-family:'Playfair Display',serif;color:var(--arena);margin-bottom:4px}
.coords-text p{color:rgba(245,237,224,0.65);font-size:0.85rem}
.coords-value{font-family:monospace;font-size:1rem;color:var(--agua-light);margin-top:6px;font-weight:600}

.cta-box{background:var(--selva);border-radius:16px;padding:40px;text-align:center;margin-top:48px}
.cta-box h3{font-family:'Playfair Display',serif;color:var(--arena);font-size:1.5rem;margin-bottom:10px}
.cta-box p{color:rgba(245,237,224,0.65);margin-bottom:24px;font-size:0.95rem}
.cta-box a{display:inline-block;background:var(--agua);color:white;text-decoration:none;padding:13px 32px;border-radius:6px;font-weight:500;transition:background 0.3s}
.cta-box a:hover{background:var(--agua-deep)}

@media(max-width:768px){.page-hero{padding:56px 24px}.distances-bar{padding:16px 20px}.page-content{padding:48px 20px}.origin-card-header{flex-direction:column;align-items:flex-start}}