/* ============================================================ InfoCusco Travel · sistema de diseño (v1.5.0) ------------------------------------------------------------ ARQUITECTURA DE TOKENS · pensada para re-tematizar fácil. Capa 1 · PALETA CRUDA → los colores/fuentes de la marca. Capa 2 · TOKENS SEMÁNTICOS → roles (primario, acento, ...). Para CAMBIAR EL LOOK del sitio, en el 90% de los casos basta con reasignar los tokens semánticos de abajo (o cambiar la paleta cruda). Los componentes NO usan colores crudos: usan los roles. Así, restyle = tocar ~tokens, no reescribir reglas. ============================================================ */ /* Las fuentes se cargan desde el (no bloqueante). Ver partes/header.php */ :root{ /* ---- Capa 1 · PALETA CRUDA (identidad Cusco) ---- */ --c-noche:#10233f; /* cielo andino de altura */ --c-noche2:#1c3555; --c-nieve:#f7f4ee; /* fondo cálido */ --c-oro:#e8a13a; /* sol inca */ --c-chicha:#b23a48; /* rojo textil */ --c-jade:#2f7d6e; /* valle */ --c-piedra:#6b7280; --c-tinta:#1a2233; --c-linea:#e6ddd0; --c-panel:#fffdf9; --c-blanco:#ffffff; --font-display:'Fraunces',Georgia,serif; --font-body:'Instrument Sans',system-ui,sans-serif; --font-data:'Space Grotesk',monospace; /* ---- Capa 2 · TOKENS SEMÁNTICOS (roles — reasigna aquí para re-tematizar) ---- */ --primario:var(--c-noche); /* superficies oscuras, marca */ --primario-2:var(--c-noche2); /* degradado del primario */ --acento:var(--c-oro); /* CTA, firma, detalles */ --realce:var(--c-chicha); /* precios, énfasis */ --exito:var(--c-jade); /* checks, positivo */ --fondo:var(--c-nieve); /* fondo de página */ --superficie:var(--c-panel); /* tarjetas/paneles */ --superficie-2:var(--c-blanco); /* superficie elevada */ --texto:var(--c-tinta); /* texto principal */ --texto-tenue:var(--c-piedra); /* texto secundario */ --texto-inverso:var(--c-nieve); /* texto sobre primario */ --borde:var(--c-linea); /* líneas y bordes */ /* roles tipográficos (los componentes usan estos, no las fuentes crudas) */ --tipo-titulo:var(--font-display); --tipo-texto:var(--font-body); --tipo-dato:var(--font-data); /* ---- Escala tipográfica (fluida) ---- */ --fs-xs:12px; --fs-sm:14px; --fs-base:17px; --fs-lg:clamp(1.05rem,2vw,1.28rem); --fs-h3:1.5rem; --fs-h2:clamp(1.9rem,4vw,2.9rem); --fs-h1:clamp(2.1rem,5vw,3.4rem); --fs-hero:clamp(2.6rem,6vw,4.6rem); /* ---- Espaciado ---- */ --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:22px; --sp-6:30px; --sp-7:44px; --sp-8:76px; /* ---- Radios ---- */ --r-sm:2px; --r-md:3px; --r-lg:6px; --r-pill:40px; /* ---- Sombras ---- */ --sombra-card:0 18px 40px -22px rgba(16,35,63,.45); --sombra-flota:0 10px 30px rgba(16,35,63,.3); /* ---- Motion ---- */ --trans:.18s ease; --trans-lento:.28s ease; /* ---- Layout ---- */ --ancho-max:1140px; --ancho-lectura:720px; /* ---- Alias de compatibilidad (código previo que aún usa nombres viejos) ---- */ --noche:var(--primario); --noche2:var(--primario-2); --nieve:var(--fondo); --oro:var(--acento); --chicha:var(--realce); --jade:var(--exito); --piedra:var(--texto-tenue); --tinta:var(--texto); --linea:var(--borde); --panel:var(--superficie); --serif:var(--tipo-titulo); --sans:var(--tipo-texto); --mono:var(--tipo-dato); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--nieve);color:var(--tinta);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:1140px;margin:0 auto;padding:0 22px} /* ---- Firma: cota de altitud ---- */ .cota{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--oro);display:inline-flex;align-items:center;gap:9px;margin:0 0 14px} .cota::before{content:"";width:34px;height:1px;background:var(--oro)} .cota::after{content:attr(data-msnm);color:var(--piedra);font-size:11px;letter-spacing:.05em} /* ---- Botones ---- */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600; font-size:15px;padding:13px 24px;border-radius:2px;border:1.5px solid var(--noche); background:var(--noche);color:var(--nieve);text-decoration:none;cursor:pointer;transition:.18s} .btn:hover{background:transparent;color:var(--noche)} .btn.oro{background:var(--oro);border-color:var(--oro);color:var(--noche)} .btn.oro:hover{background:transparent;color:var(--noche)} .btn.ghost{background:transparent;color:var(--noche)} .btn.ghost:hover{background:var(--noche);color:var(--nieve)} .btn.wa{background:#25d366;border-color:#25d366;color:#fff} .btn.wa:hover{background:#1da851;border-color:#1da851;color:#fff} /* ---- Header ---- */ .hd{position:sticky;top:0;z-index:50;background:rgba(247,244,238,.9); backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)} .hd-in{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;max-width:1140px;margin:0 auto} .logo{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--noche);text-decoration:none;letter-spacing:-.01em} .logo span{color:var(--oro)} .nav{display:flex;align-items:center;gap:26px} .nav a{font-size:15px;text-decoration:none;color:var(--tinta);font-weight:500} .nav a:hover{color:var(--chicha)} .lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px;border:1px solid var(--linea);border-radius:2px;overflow:hidden} .lang a{padding:5px 9px;text-decoration:none;color:var(--piedra);text-transform:uppercase} .lang a.on{background:var(--noche);color:var(--nieve)} .menu-btn{display:none;background:none;border:none;font-size:24px;cursor:pointer;color:var(--noche)} /* ---- Hero: tesis del tema ---- */ .hero{position:relative;background:var(--noche);color:var(--nieve);overflow:hidden} .hero::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 80% at 80% 10%, rgba(232,161,58,.18), transparent 60%), radial-gradient(90% 70% at 10% 100%, rgba(47,125,110,.22), transparent 55%)} .hero-in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:96px 22px 104px} .hero .cota{color:var(--oro)} .hero .cota::after{color:rgba(247,244,238,.5)} .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02;letter-spacing:-.02em;margin:0 0 22px;max-width:15ch} .hero p{font-size:clamp(1.05rem,2vw,1.28rem);max-width:52ch;color:rgba(247,244,238,.86);margin:0 0 34px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} /* Silueta de cordillera al pie del hero */ .cordillera{position:absolute;left:0;right:0;bottom:-1px;z-index:1;width:100%;height:90px;display:block} /* ---- Secciones ---- */ .sec{padding:76px 0} .sec-h{margin:0 0 40px} .sec-h h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.05;letter-spacing:-.015em;margin:0;color:var(--noche)} /* ---- Grilla de paquetes ---- */ .paqs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px} .paq{background:var(--panel);border:1px solid var(--linea);border-radius:3px;overflow:hidden; display:flex;flex-direction:column;transition:.2s;text-decoration:none;color:inherit} .paq:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(16,35,63,.45);border-color:var(--oro)} .paq-top{background:linear-gradient(135deg,var(--noche),var(--noche2));color:var(--nieve); padding:22px 22px 18px;position:relative} .paq-top .cota{margin-bottom:8px} .paq-dur{font-family:var(--mono);font-size:12px;color:rgba(247,244,238,.6);position:absolute;top:22px;right:22px} .paq-top h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.1;margin:0} .paq-body{padding:20px 22px;flex:1;display:flex;flex-direction:column} .paq-body p{margin:0 0 18px;color:var(--piedra);font-size:15px;flex:1} .paq-foot{display:flex;align-items:baseline;justify-content:space-between;border-top:1px dashed var(--linea);padding-top:16px} .desde-lbl{font-size:12px;color:var(--piedra);text-transform:uppercase;letter-spacing:.08em} .desde-val{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--chicha)} .desde-val small{font-size:.9rem;font-weight:400} .paq-flecha{font-size:20px;color:var(--noche)} .star{position:absolute;top:20px;left:20px;color:var(--oro)} /* ---- Detalle de paquete ---- */ .det-hero{background:var(--noche);color:var(--nieve);padding:70px 0 60px} .det-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;margin:0 0 16px;max-width:18ch} .det-hero .lead{font-size:1.15rem;color:rgba(247,244,238,.85);max-width:56ch;margin:0} .det-grid{display:grid;grid-template-columns:1fr 350px;gap:44px;align-items:start;margin-top:-40px;position:relative;z-index:3} .det-main{background:var(--panel);border:1px solid var(--linea);border-radius:3px;padding:34px} .det-main h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--noche);margin:34px 0 18px} .det-main h2:first-child{margin-top:0} .det-desc{white-space:pre-line;color:var(--tinta)} /* Niveles */ .niveles{display:grid;gap:14px} .nivel{border:1px solid var(--linea);border-radius:3px;overflow:hidden} .nivel-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px; background:var(--nieve);cursor:pointer;user-select:none} .nivel-h b{font-family:var(--serif);font-size:1.15rem;color:var(--noche);font-weight:600} .nivel-precio{font-family:var(--serif);color:var(--chicha);font-weight:600;font-size:1.3rem} .nivel-precio small{font-size:.8rem;color:var(--piedra);font-weight:400} .nivel-body{padding:0 18px;max-height:0;overflow:hidden;transition:max-height .3s,padding .3s} .nivel.open .nivel-body{max-height:800px;padding:18px} .nivel-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px} .nivel-cols h4{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em} .nivel-cols .si h4{color:var(--jade)} .nivel-cols .no h4{color:var(--chicha)} .nivel-cols div p{margin:0;font-size:14px;color:var(--tinta);white-space:pre-line;line-height:1.5} /* Itinerario */ .itin{position:relative;padding-left:30px} .itin::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--linea)} .itin-dia{position:relative;margin-bottom:24px} .itin-dia::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px; border-radius:50%;background:var(--oro);border:2px solid var(--nieve);box-shadow:0 0 0 2px var(--oro)} .itin-dia .cota{margin-bottom:6px} .itin-tramo{margin-bottom:10px} .itin-tramo b{color:var(--noche)} .itin-tramo .tipo{font-family:var(--mono);font-size:11px;color:var(--piedra);text-transform:uppercase} .itin-tramo p{margin:2px 0 0;font-size:14.5px;color:var(--piedra)} /* Extras */ .extras{list-style:none;padding:0;margin:0} .extras li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--linea)} .extras li b{color:var(--noche)} .extras .ex-precio{font-family:var(--serif);color:var(--chicha);font-weight:600} /* Aside cotización */ .aside{position:sticky;top:90px} .cotiz{background:var(--noche);color:var(--nieve);border-radius:3px;padding:28px} .cotiz h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 6px} .cotiz .sub{color:rgba(247,244,238,.7);font-size:14px;margin:0 0 20px} .f-fld{margin-bottom:13px} .f-fld label{display:block;font-size:13px;margin-bottom:5px;color:rgba(247,244,238,.8)} .f-fld input,.f-fld textarea{width:100%;padding:11px 13px;border:1px solid rgba(247,244,238,.2); border-radius:2px;background:rgba(255,255,255,.06);color:var(--nieve);font-family:var(--sans);font-size:15px} .f-fld input::placeholder,.f-fld textarea::placeholder{color:rgba(247,244,238,.4)} .f-fld input:focus,.f-fld textarea:focus{outline:2px solid var(--oro);outline-offset:1px;border-color:transparent} .cotiz .btn{width:100%;justify-content:center;margin-top:6px} .cotiz-msg{padding:12px;border-radius:2px;font-size:14px;margin-bottom:14px} .cotiz-msg.err{background:rgba(178,58,72,.2);border:1px solid var(--chicha)} .hp{position:absolute;left:-9999px} /* Salidas */ .salidas{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .salida{font-family:var(--mono);font-size:13px;padding:6px 12px;border:1px solid var(--linea);border-radius:2px;background:var(--nieve)} .diarias{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;color:var(--jade)} /* ---- Nosotros ---- */ .nos{max-width:680px} .nos p{font-size:1.15rem;margin:0 0 20px} .nos p:first-of-type{font-family:var(--serif);font-size:1.5rem;line-height:1.4;color:var(--noche)} /* ---- Estados vacío / error / gracias ---- */ .estado{text-align:center;padding:90px 22px;max-width:560px;margin:0 auto} .estado .emoji{font-size:52px;margin-bottom:16px} .estado h1{font-family:var(--serif);font-weight:500;font-size:2.2rem;color:var(--noche);margin:0 0 12px} .estado p{color:var(--piedra);margin:0 0 26px} /* ---- Footer ---- */ .ft{background:var(--noche);color:rgba(247,244,238,.72);padding:52px 0 30px;margin-top:60px} .ft-in{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap} .ft .logo{color:var(--nieve)} .ft-tag{font-size:14px;margin-top:8px} .ft-links{display:flex;flex-direction:column;gap:8px} .ft-links a{color:rgba(247,244,238,.72);text-decoration:none;font-size:15px} .ft-links a:hover{color:var(--oro)} .ft-abajo{border-top:1px solid rgba(247,244,238,.12);margin-top:34px;padding-top:20px; font-family:var(--mono);font-size:12px;color:rgba(247,244,238,.5)} /* ---- WhatsApp flotante ---- */ .wa-float{position:fixed;bottom:22px;right:22px;z-index:60;width:58px;height:58px;border-radius:50%; background:#25d366;display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px -6px rgba(37,211,102,.6);text-decoration:none;transition:.2s} .wa-float:hover{transform:scale(1.08)} .wa-float svg{width:30px;height:30px;fill:#fff} /* ---- Responsive ---- */ @media(max-width:860px){ .det-grid{grid-template-columns:1fr;margin-top:20px} .aside{position:static} .nav{display:none} .nav.abierto{display:flex;position:absolute;top:100%;right:0;left:0;flex-direction:column; background:var(--nieve);padding:18px 22px;gap:14px;border-bottom:1px solid var(--linea)} .menu-btn{display:block} .nivel-cols{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} .paq:hover{transform:none} } :focus-visible{outline:2px solid var(--oro);outline-offset:2px} /* ============================================================ Sprint 5 · SEO/GEO + accesibilidad + rendimiento (v1.4.0) ============================================================ */ /* Skip-link (accesibilidad): oculto hasta recibir foco por teclado */ .skip{ position:absolute; left:-999px; top:0; z-index:1000; background:var(--noche); color:#fff; padding:10px 16px; border-radius:0 0 6px 0; font-family:var(--mono); font-size:14px; } .skip:focus{ left:0; } /* Migas de pan */ .migas{ font-size:13px; color:var(--piedra); padding:14px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .migas a{ color:var(--jade); text-decoration:none; } .migas a:hover{ text-decoration:underline; } .migas .sep{ color:var(--piedra); opacity:.5; } .migas [aria-current="page"]{ color:var(--noche); font-weight:500; } /* Preguntas frecuentes */ .faq-sec{ padding:20px 0 48px; } .faq-sec h2{ margin-bottom:18px; } .faq{ display:flex; flex-direction:column; gap:10px; max-width:820px; } .faq-item{ border:1px solid var(--linea); border-radius:6px; background:#fff; overflow:hidden; transition:border-color .15s; } .faq-item[open]{ border-color:var(--oro); } .faq-item summary{ cursor:pointer; padding:16px 20px; font-weight:600; color:var(--noche); list-style:none; position:relative; padding-right:44px; font-family:var(--serif); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--oro); font-weight:400; line-height:1; } .faq-item[open] summary::after{ content:'−'; } .faq-a{ padding:0 20px 18px; color:var(--piedra); line-height:1.65; } /* ============================================================ Utilidades (v1.5.0) — separan estructura de presentación. Reemplazan los estilos inline dispersos. Todas derivan de tokens, así que también respetan el re-tematizado. ============================================================ */ .u-tenue{color:var(--texto-tenue)} .u-texto{color:var(--texto)} .u-centro{text-align:center} .u-derecha{text-align:right} .u-full{width:100%;justify-content:center} .u-mt-3{margin-top:var(--sp-3)} .u-mt-4{margin-top:var(--sp-4)} .u-mt-5{margin-top:var(--sp-5)} .u-mt-6{margin-top:var(--sp-6)} .u-pb-6{padding-bottom:var(--sp-7)} .u-eyebrow{font-size:var(--fs-xs);color:var(--texto-tenue);text-transform:uppercase;letter-spacing:.08em} .u-col-full{grid-column:1/-1} .u-lectura{max-width:var(--ancho-lectura);margin-left:auto;margin-right:auto} .u-medio{max-width:620px} .u-angosto{max-width:560px} /* Título de sección reutilizable (antes iba inline con clamp) */ .titulo-seccion{font-family:var(--tipo-titulo);font-weight:500;font-size:var(--fs-h2);color:var(--primario);margin:0 0 var(--sp-6)} .titulo-seccion.sm{font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 var(--sp-2)} /* Botón sobre fondo oscuro (antes: style con color/borde inline) */ .btn.sobre-oscuro{color:var(--texto-inverso);border-color:rgba(247,244,238,.4)} .btn.claro{background:var(--superficie-2);border-color:var(--borde);color:var(--texto)} /* Barra de aviso oscura (antes bloque inline en reserva/checkout) */ .aviso-oscuro{margin-top:var(--sp-5);padding:var(--sp-4);background:var(--primario);color:var(--texto-inverso);border-radius:var(--r-md);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}