/* ============================================================ TravelMaps.es — Sistema de diseño base Colores, tipografía, componentes y secciones compartidas. Variaciones de estilo controladas por data-* en (las aplica js/tweaks.js). ============================================================ */ /* ---------- Tokens de marca ---------- */ :root{ --green:#78BE20; --green-d:#5f9a18; --orange:#F7941D; --orange-d:#e07c08; --blue:#29ABE2; --blue-d:#1c8dc0; --dark:#1A1A2E; --dark-2:#252540; --light:#F9F9F6; --gray:#6B7280; --gray-l:#9aa1ab; --white:#FFFFFF; --line:#ECECE7; --danger:#C0392B; --danger-bg:#FBE9E7; --warn-bg:#FBF1DD; /* gradiente firma (ruta) */ --grad:linear-gradient(90deg,var(--green) 0%,var(--orange) 50%,var(--blue) 100%); /* acento (cambiable por Tweaks) */ --accent:var(--green); --accent-d:var(--green-d); --accent-soft:#EEF6E0; /* radios (cambiable por Tweaks) */ --r-sm:10px; --r:18px; --r-lg:28px; --r-pill:100px; /* tipografía display (cambiable por Tweaks) */ --font-display:'Playfair Display',Georgia,serif; --font-body:'DM Sans',system-ui,sans-serif; --font-mono:'Space Mono',monospace; /* ritmo de secciones (cambiable por Tweaks) */ --section-y:120px; --shadow-sm:0 2px 18px rgba(26,26,46,.06); --shadow:0 14px 50px rgba(26,26,46,.10); --shadow-lg:0 30px 80px rgba(26,26,46,.16); --maxw:1200px; } /* ---- Variaciones de acento ---- */ html[data-accent="orange"]{--accent:var(--orange);--accent-d:var(--orange-d);--accent-soft:#FDEFDD} html[data-accent="blue"]{--accent:var(--blue);--accent-d:var(--blue-d);--accent-soft:#E4F4FC} html[data-accent="green"]{--accent:var(--green);--accent-d:var(--green-d);--accent-soft:#EEF6E0} /* ---- Variaciones de radio ---- */ html[data-radius="sharp"]{--r-sm:3px;--r:6px;--r-lg:10px;--r-pill:6px} /* ---- Variaciones de densidad ---- */ html[data-density="comfy"]{--section-y:152px} html[data-density="compact"]{--section-y:88px} /* ---- Variaciones de fuente display ---- */ html[data-headings="sans"]{--font-display:'DM Sans',system-ui,sans-serif} /* ---------- Reset ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); background:var(--light); color:var(--dark); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} ul{list-style:none} ::selection{background:var(--accent);color:#fff} /* ---------- Tipografía ---------- */ .display{font-family:var(--font-display);font-weight:900;line-height:1.04;letter-spacing:-.01em} h1,h2,h3{font-family:var(--font-display);font-weight:900;line-height:1.06;letter-spacing:-.01em} html[data-headings="sans"] h1, html[data-headings="sans"] h2, html[data-headings="sans"] h3{letter-spacing:-.03em} .eyebrow{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); font-weight:700; display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block} .eyebrow.center{justify-content:center} .lead{font-size:1.18rem;line-height:1.75;color:var(--gray)} .muted{color:var(--gray)} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .section{padding:var(--section-y) 0} .section-head{max-width:680px;margin-bottom:56px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head h2{font-size:clamp(2rem,4.4vw,3.3rem);margin:18px 0 20px} .split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} @media(max-width:880px){.split{grid-template-columns:1fr;gap:44px}} /* divisor de ruta firma */ .route-divider{height:4px;width:100%;background:var(--grad);border-radius:4px} .route-dot{height:8px;width:8px;border-radius:50%;background:var(--accent);display:inline-block} /* ---------- Botones ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-weight:600;font-size:.98rem; padding:15px 28px;border-radius:var(--r-pill); border:2px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,color .2s; white-space:nowrap; } .btn svg{width:18px;height:18px} .btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -8px var(--accent)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px var(--accent)} html[data-accent="tri"] .btn-primary{background:var(--grad);box-shadow:0 12px 30px -8px rgba(247,148,29,.55)} .btn-dark{background:var(--dark);color:#fff} .btn-dark:hover{transform:translateY(-2px);background:#11111f} .btn-ghost{background:transparent;border-color:var(--line);color:var(--dark)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-light{background:#fff;color:var(--dark)} .btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn-lg{padding:18px 36px;font-size:1.05rem} /* ---------- Pills / chips ---------- */ .pill{ display:inline-flex;align-items:center;gap:8px; font-family:var(--font-mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase; font-weight:700;padding:8px 16px;border-radius:var(--r-pill); background:var(--accent-soft);color:var(--accent-d); } .chip{ font-size:.86rem;font-weight:600;padding:9px 18px;border-radius:var(--r-pill); background:#fff;border:1.5px solid var(--line);color:var(--gray);transition:all .18s;cursor:pointer; } .chip:hover{border-color:var(--accent);color:var(--accent)} .chip.active{background:var(--accent);border-color:var(--accent);color:#fff} /* ---------- Header / Nav ---------- */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:90; transition:background .3s,box-shadow .3s,padding .3s; padding:22px 0; } .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px} .site-header.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line);padding:14px 0} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand img{height:70px;width:auto;transition:height .3s} .site-header.scrolled .brand img{height:56px} .nav{display:flex;align-items:center;gap:34px} .nav a{ font-size:.96rem;font-weight:500;color:var(--dark);position:relative;padding:4px 0; transition:color .2s; } .nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s} .nav a:hover{color:var(--accent)} .nav a:hover::after,.nav a.current::after{width:100%} .nav a.current{color:var(--accent)} /* header sobre hero oscuro */ .site-header.on-dark:not(.scrolled) .nav a{color:rgba(255,255,255,.9)} .site-header.on-dark:not(.scrolled) .nav a:hover{color:#fff} .site-header.on-dark:not(.scrolled) .brand .brand-name{color:#fff} /* ---------- Mega-menú Destinos ---------- */ .nav-dd{position:relative;display:flex;align-items:center} .nav-dd-trigger{display:inline-flex;align-items:center;gap:6px} .nav-dd-trigger .dd-chev{width:14px;height:14px;transition:transform .25s;stroke-width:2.4} .nav-dd:hover .dd-chev,.nav-dd:focus-within .dd-chev{transform:rotate(180deg)} .mega{ position:absolute;top:100%;left:-24px;padding-top:18px; opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .22s,transform .22s;z-index:80; } .nav-dd:hover .mega,.nav-dd:focus-within .mega{opacity:1;pointer-events:auto;transform:translateY(0)} .mega-inner{ display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px 30px; background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg); padding:26px 30px;width:660px;border:1px solid var(--line); } .mega-h{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px;grid-column:auto} .mega-col{display:flex;flex-direction:column;gap:2px} .mega-col > a{font-size:.95rem;font-weight:500;color:var(--dark);padding:7px 10px;margin:0 -10px;border-radius:8px;transition:background .15s,color .15s;width:auto} .mega-col > a::after{display:none} .mega-col > a:hover{background:var(--accent-soft);color:var(--accent-d)} .mega-promo{gap:10px;justify-content:center} .mega-card{display:block;border-radius:var(--r);padding:16px 18px;border:1px solid var(--line);transition:transform .18s,box-shadow .18s,border-color .18s} .mega-card::after{display:none} .mega-card strong{display:block;font-size:1rem;margin-bottom:3px;color:var(--dark)} .mega-card span{display:block;font-size:.8rem;color:var(--gray);line-height:1.4} .mega-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent} .mega-ofertas{background:linear-gradient(135deg,#FDEFDD,#fff)} .mega-ofertas .mc-tag{display:inline-block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--orange);padding:3px 9px;border-radius:20px;margin-bottom:8px} .mega-ofertas strong{color:var(--orange-d)} .mega-medida{background:linear-gradient(135deg,var(--accent-soft),#fff)} .mega-medida strong{color:var(--accent-d)} .header-cta{display:flex;align-items:center;gap:14px} .nav-toggle{display:none;background:none;border:0;width:42px;height:42px;flex-direction:column;justify-content:center;gap:6px;align-items:center} .nav-toggle span{display:block;width:24px;height:2px;background:var(--dark);transition:.3s} .site-header.on-dark:not(.scrolled) .nav-toggle span{background:#fff} @media(max-width:920px){ .nav{ position:fixed;inset:0 0 0 auto;width:min(82vw,360px); background:var(--white);flex-direction:column;align-items:flex-start;justify-content:flex-start; padding:104px 36px 36px;gap:8px;transform:translateX(100%);transition:transform .35s cubic-bezier(.5,0,0,1); box-shadow:var(--shadow-lg);z-index:95; } .nav.open{transform:translateX(0)} .nav a{font-size:1.3rem;font-family:var(--font-display);font-weight:700;padding:12px 0;width:100%;border-bottom:1px solid var(--line)} .nav a::after{display:none} /* Mega-menú dentro del drawer móvil */ .nav-dd{display:block;width:100%} .nav-dd-trigger{width:100%;justify-content:space-between;border-bottom:1px solid var(--line)} .mega{position:static;opacity:1;pointer-events:auto;transform:none;padding-top:0;width:100%} .mega-inner{display:block;width:100%;box-shadow:none;border:0;padding:6px 0 10px 14px;border-radius:0} .mega-h{margin-top:14px;font-size:.58rem} .mega-col > a{font-size:1.02rem;font-family:var(--font-body);font-weight:500;padding:9px 0;margin:0} .mega-promo{margin-top:14px;gap:8px} .mega-card{padding:12px 14px} .nav-dd:hover .dd-chev,.nav-dd:focus-within .dd-chev{transform:none} .nav-toggle{display:flex;z-index:96} .nav-toggle.open span{background:var(--dark)} .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .header-cta .btn:not(.nav-toggle){display:none} .nav-backdrop{position:fixed;inset:0;background:rgba(26,26,46,.4);opacity:0;pointer-events:none;transition:opacity .3s;z-index:94} .nav-backdrop.show{opacity:1;pointer-events:auto} } /* ---------- Cards ---------- */ .card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s,box-shadow .3s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} /* image-slot styling integration */ image-slot{--placeholder-fg:var(--gray)} .media{position:relative;width:100%;background:var(--accent-soft)} .media image-slot{width:100%;height:100%} /* ---------- Footer ---------- */ .site-footer{background:var(--dark);color:rgba(255,255,255,.75);padding:84px 0 38px;position:relative;overflow:hidden} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)} .footer-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(120,190,32,.14),transparent 70%);top:-200px;right:-120px;pointer-events:none} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:48px;position:relative;z-index:1} @media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.footer-grid{grid-template-columns:1fr}} .site-footer img.flogo{height:70px;margin-bottom:20px} .site-footer h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:20px;font-weight:700} .site-footer .fcol a{display:block;padding:7px 0;color:rgba(255,255,255,.7);font-size:.95rem;transition:color .2s,padding-left .2s} .site-footer .fcol a:hover{color:#fff;padding-left:6px} /* Los botones dentro del pie no deben heredar el estilo de enlace de columna */ .site-footer .fcol a.btn{padding:15px 28px;color:#fff;font-size:.98rem} .site-footer .fcol a.btn:hover{padding:15px 28px;color:#fff} .footer-bottom{margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.45)} .footer-bottom .tag{font-family:var(--font-mono);letter-spacing:.06em} .social{display:flex;gap:12px;margin-top:22px} .site-footer .social a{width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:all .2s} .site-footer .social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-3px);padding:0} .social svg{width:18px;height:18px;display:block;fill:rgba(255,255,255,.8)} .social a:hover svg{fill:#fff} /* ---------- Scroll reveal ---------- Estado base = VISIBLE. El estado oculto solo se aplica como mejora progresiva cuando JS añade html.js-anim y el usuario no pidió menos movimiento. Así nunca queda contenido en blanco si JS falla o el navegador congela las transiciones. */ .reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} @media(prefers-reduced-motion:no-preference){ html.js-anim .reveal:not(.is-visible){opacity:0;transform:translateY(26px)} } .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s} .reveal[data-d="5"]{transition-delay:.4s} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---------- Utilidades ---------- */ .dark-band{background:var(--dark);color:#fff} .dark-band .muted,.dark-band .lead{color:rgba(255,255,255,.66)} .dark-band .section-head h2{color:#fff} .tinted{background:linear-gradient(180deg,#fff,var(--light))} .center{text-align:center} .dotted-route{ height:2px;background-image:linear-gradient(90deg,var(--accent) 60%,transparent 0); background-size:14px 2px;background-repeat:repeat-x; } .kpi-num{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}