/* ============================================================ KV 4 — "EXPEDICIÓN" · componentes Barra de navegación, hero, franja de datos, tarjetas de expedición, ficha técnica, perfil de elevación, mapa, bitácora, cierre y pie. Declaraciones del KV aprobado, sin reinterpretar. ============================================================ */ /* ---------- nav ---------- El cliente pidió volver a la caja alta en el menú: «dejémoslo sostenido en mayúscula». Es lo único que queda gritando a propósito, junto con las etiquetas de ficha técnica. */ .cabecera{position:absolute;top:var(--admin-bar);left:0;right:0;z-index:20;padding:22px 0} .nav{display:flex;align-items:center;justify-content:space-between;gap:26px} .nav .logo img,.nav img{height:32px;width:auto} .menu{display:flex;gap:26px;list-style:none;align-items:center} .menu li{list-style:none} .menu a{font-family:var(--M);font-size:12.5px;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:rgba(242,243,245,.72)} .menu a:hover,.menu .current-menu-item>a,.menu .current-menu-parent>a{color:var(--naranja)} /* En la portada el enlace «Blog» apunta a /#bitacora, que WordPress considera la página actual, y salía en naranja como si fuera la sección activa. La portada es una sola página con varias secciones: ahí no hay ítem «actual». */ body.andes-es-portada .menu .current-menu-item>a{color:rgba(242,243,245,.72)} .nav-acciones{display:flex;align-items:center;gap:12px} .nav .cta{border:1px solid var(--naranja);border-radius:10px;color:var(--naranja);padding:10px 18px; font-family:var(--M);font-size:12.5px;font-weight:600;letter-spacing:.02em; transition:background .45s cubic-bezier(.32,.72,0,1),color .45s cubic-bezier(.32,.72,0,1)} .nav .cta:hover{background:var(--naranja);color:#fff} /* El KV esconde el menú por debajo de 960 px y no ofrece alternativa. Aquí se despliega con un botón mono, con los mismos tokens del panel. */ .nav-toggle{display:none;background:none;border:1px solid var(--linea);border-radius:10px; color:var(--tinta);padding:10px 14px;cursor:pointer;align-items:center} .nav-toggle:hover{border-color:var(--tinta)} .nav-toggle .mono{letter-spacing:.12em} /* ---------- portada: logo centrado, dos enlaces a cada lado ---------- El cliente: «el logo de Andes en la mitad» y luego «agreguemos la opción de inicio para tener 2 y 2 pestañas a cada lado». Con cuatro enlaces, el reparto es dos a la izquierda y dos a la derecha del logo. Se hace SIN partir el menú en dos listas: el logo va en absoluto al centro y al TERCER enlace se le pone `margin-left:auto`, que empuja a él y al cuarto contra el borde derecho. Una sola lista, un solo nodo de navegación, y el desplegable de móvil sigue funcionando tal cual estaba. El hueco central tiene que ser mayor que el logo (unos 180 px a 46 px de alto) o los enlaces se le meterían debajo; de ahí el `padding` lateral. */ .cabecera--centrada .wrap{position:relative} .cabecera--centrada .nav{flex-direction:row;align-items:center;gap:0;min-height:52px} .cabecera--centrada .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)} .cabecera--centrada .logo img{height:46px;width:auto} .cabecera--centrada .nav-principal{width:100%} .cabecera--centrada .menu{width:100%;justify-content:flex-start;gap:30px; padding-left:12px;padding-right:12px} /* El tercer enlace arranca el grupo de la derecha: `margin-left:auto` se come todo el hueco libre y lo empuja a él y al cuarto contra el borde derecho. */ .cabecera--centrada .menu li:nth-child(3){margin-left:auto} /* Zona de respeto alrededor del logo: si un enlace se acercara demasiado, se separa en vez de quedar debajo. */ .cabecera--centrada .menu li:nth-child(2){margin-right:120px} .cabecera--centrada .menu li:nth-child(3){padding-left:120px} .cabecera--centrada .nav-acciones{position:absolute;top:0;right:0} /* ---------- hero ---------- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column; justify-content:flex-end;overflow:hidden} .hero .foto{position:absolute;inset:0;background-position:center 42%;background-size:cover; background-repeat:no-repeat;filter:saturate(.82) contrast(1.06)} .hero::after{content:'';position:absolute;inset:0; background: linear-gradient(100deg,rgba(10,11,13,.92) 0%,rgba(10,11,13,.52) 48%,rgba(10,11,13,.30) 76%), linear-gradient(180deg,rgba(10,11,13,.86) 0%,rgba(10,11,13,.24) 38%,rgba(10,11,13,.94) 100%)} .hero .contenido{position:relative;z-index:3;padding-bottom:46px;padding-top:130px} /* ---------- carrusel del hero ---------- Las fotos van en una caja absoluta que mide exactamente lo que el hero, con `object-fit:cover`: da igual la proporción de cada imagen, el layout no se mueve ni un píxel. El fundido es lento (1,2 s) para que el cambio no dé un salto. */ .hero__slider{position:absolute;inset:0;overflow:hidden} .hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 42%;opacity:0;filter:saturate(.82) contrast(1.06); transition:opacity 1.2s cubic-bezier(.22,.61,.36,1)} .hero__foto.is-activa{opacity:1} /* Crédito de la foto del hero. Va abajo a la derecha, discreto pero legible: cumple la atribución que exige la licencia CC BY de la foto provisional de Alta Guajira sin ensuciar el diseño. `z-index` por encima del velo oscuro (.hero::after) y por debajo del contenido. */ .hero__credito{position:absolute;right:5vw;bottom:14px;z-index:4;margin:0; font-size:10.5px;letter-spacing:.04em;color:var(--apagado); text-shadow:0 1px 2px rgba(0,0,0,.7)} @media (max-width:560px){ /* En móvil el botón flotante ocupa el rincón: el crédito se sube y se pega a la izquierda para no quedar debajo. */ .hero__credito{right:auto;left:5vw;bottom:10px;font-size:9.5px} } /* mandos: líneas que se rellenan mientras dura cada foto */ .slider-mando{position:relative;z-index:4;display:flex;align-items:center;gap:20px; flex-wrap:wrap;margin-top:30px} .slider-mando[hidden]{display:none} .slider-puntos{display:flex;gap:8px;align-items:center} /* * El mando es un botón invisible de 44x22 px (área de toque cómoda) con una * línea dentro. El relleno lo pinta `::after`, que se escala de 0 a 1 durante * `--andes-intervalo` — el mismo número que usa el JS para rotar. */ .slider-punto{background:none;border:0;padding:10px 0;cursor:pointer; display:block;width:58px;position:relative; -webkit-tap-highlight-color:transparent} /* * 3 px de alto y un carril al 38 %: con 2 px al 20 % no se veían sobre la foto * oscura del hero (comprobado ampliando la captura). El carril es un blanco * tibio, no gris puro, para que no desentone con la tinta del sitio, y lleva * sombra para que se lea también sobre una foto clara. */ .slider-punto__barra{display:block;height:3px;border-radius:3px; background:rgba(242,243,245,.38);position:relative;overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.45); transition:background-color .4s cubic-bezier(.32,.72,0,1)} .slider-punto:hover .slider-punto__barra{background:rgba(242,243,245,.62)} .slider-punto__barra::after{content:"";position:absolute;inset:0;background:var(--naranja); transform:scaleX(0);transform-origin:left center;border-radius:3px} /* La activa se va rellenando. `forwards` la deja llena hasta que cambie. */ .slider-punto.is-activo .slider-punto__barra::after{ animation:andes-progreso var(--andes-intervalo,7000ms) linear forwards} /* Pausa por botón, por puntero encima o por pestaña oculta: la barra se congela donde está, que es lo que cuenta. */ .slider-mando.is-pausado .slider-punto.is-activo .slider-punto__barra::after{ animation-play-state:paused} @keyframes andes-progreso{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* Sin movimiento: la barra no se anima, se queda marcando solo cuál es. */ @media (prefers-reduced-motion: reduce){ .slider-punto.is-activo .slider-punto__barra::after{animation:none;transform:scaleX(1)} } .slider-pausa{background:none;border:0;color:var(--apagado);padding:6px 0;cursor:pointer; display:inline-flex;align-items:center;gap:8px; transition:color .4s cubic-bezier(.32,.72,0,1)} .slider-pausa:hover{color:var(--tinta)} .slider-pausa[aria-pressed="true"]{color:var(--naranja)} .hero h1{font-size:clamp(38px,5.6vw,86px);max-width:20ch;margin-top:22px} .hero h1 em{font-style:normal;color:var(--naranja)} .hero .lead{font-size:16.5px;color:rgba(242,243,245,.78);max-width:52ch;margin-top:20px} /* heroes cortos: archivos, fichas y páginas. El nav sigue siendo absoluto, así que el contenido arranca por debajo de la barra. */ .hero--corto{min-height:52vh} .hero--corto h1{font-size:clamp(34px,4.8vw,68px);max-width:24ch} .hero--corto .contenido{padding-top:150px;padding-bottom:36px} /* hero sin foto (páginas legales, resultados, 404) */ .hero--plano{background:var(--panel);min-height:0} .hero--plano::after{display:none} .hero--plano .contenido{padding-bottom:44px} /* ---------- franja de datos — el componente firma ---------- */ .strip{position:relative;z-index:3;border-top:1px solid var(--linea); background:rgba(15,16,19,.72);backdrop-filter:blur(10px)} .strip .fila{display:grid;grid-template-columns:repeat(4,1fr)} .strip .celda{padding:16px 24px;border-right:1px solid var(--linea)} .strip .celda:last-child{border-right:0} /* El botón flotante de WhatsApp (plugin andes-whatsapp) vive fijo abajo a la derecha, a 56px del borde más su margen. La franja es full-bleed y su última celda llega hasta ese rincón. * * Primer intento: meterle 112px de relleno derecho a ESA celda. Error: le comía * el ancho al texto y «No masivo grupos pequeños» se partía en dos líneas, * descuadrando la altura de la franja respecto a las otras tres celdas. * * Ahora el hueco del botón se le da al CONTENEDOR, no a la celda. Así las cuatro * columnas encogen lo mismo y la última conserva ancho de sobra para su texto, * en una línea, mientras el botón sigue teniendo su sitio libre a la derecha. */ @media (min-width:800px){ .strip .fila{padding-right:88px} } .strip .et{color:var(--apagado);display:block} .strip b{display:block;font-family:var(--D);font-weight:800; font-size:28px;letter-spacing:-.02em;line-height:1.12;margin-top:6px} .strip b i{font-family:var(--M);font-size:12px;font-weight:500;font-style:normal; color:var(--apagado);letter-spacing:.06em;margin-left:6px} /* la celda de dificultad lleva etiqueta + barras en la misma línea del KV */ .strip b.b-nivel{display:flex;align-items:center;gap:12px} /* En la portada la franja lleva datos de la agencia, no de un plan: mismos estilos (es el mismo componente firma), otros números. Los números van más grandes a propósito: es el dato que el cliente quiere que se lea de un golpe («más 2.000 viajeros… como un poquito más grande»). OJO con el selector: va con `.celda b` (0,2,1) porque más abajo hay media queries de altura con `.strip b{font-size:23px}` (0,1,1). A igual especificidad ganaba la media query por ir después, y los números se quedaban en 23 px. Con esta especificidad gana la regla de la franja de agencia en cualquier altura de pantalla. */ /* * Aire por arriba. El cliente: «esto debe tener relleno arriba, si me * entiendes». En la captura que mandó se ve la etiqueta COBERTURA pegada a la * línea superior de la franja. * * Ojo: son DOS cosas distintas y aquí hacen falta las dos. * - `margin-top` separa la franja de la foto del hero (fuera de la caja). * - `padding-top` da aire DENTRO de la celda, entre la línea y la etiqueta. * Lo primero ya estaba; lo que faltaba era lo segundo. */ .strip--agencia{margin-top:2.6rem;border-top-color:var(--naranja)} /* * OJO CON LA ESPECIFICIDAD, y esta vez me pasó a mí: `.strip--agencia .celda` * son dos clases (0,2,0), exactamente lo mismo que `.strip .celda` de la media * query de altura que está más abajo. A igualdad, gana la última declarada, y * el padding se quedaba en los 13 px de la media query. Medido: 13 px. * * Con `.strip.strip--agencia .celda` son tres clases (0,3,0) y gana siempre, * sin depender del orden ni de `!important`. */ .strip.strip--agencia .celda{padding-top:30px;padding-bottom:22px} /* * Detalles en naranja. La franja era toda blanco y gris y se quedaba apagada al * lado del resto del sitio, donde el naranja marca los datos. * * Se tiñe la ETIQUETA, no el número: el número tiene que seguir siendo lo más * contrastado de la celda porque es lo que se lee de un golpe. La etiqueta en * naranja hace de señal y el número en blanco sigue mandando. */ .strip--agencia .celda .et{color:var(--naranja)} .strip--agencia .celda b{font-size:clamp(30px,2.7vw,40px);letter-spacing:-.02em;line-height:1.05} /* * La unidad SIEMPRE debajo del número y en UNA línea. * * El cliente: «que los subtítulos queden siempre abajo en una línea; en algunos * están cortados y en otros solo al lado del número». Y era literal: en esa * franja convivían tres comportamientos —«destinos» al lado, «clientes / * satisfechos» partido en dos líneas, «grupos pequeños» debajo—. * * `display:block` la manda siempre a su propia línea y `white-space:nowrap` * impide que se parta. Solo en la franja de la agencia: en la ficha de un plan * la unidad va al lado del número («1.234 m») y ahí debe seguir así. */ .strip--agencia .celda b i{display:block;font-size:13px;margin-left:0;margin-top:4px; white-space:nowrap} .strip a{color:inherit} /* ---------- expediciones ---------- */ .exps{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--linea)} /* La única acción del bloque de expediciones: ver el archivo completo. */ .acciones--seccion{margin-top:40px} /* Con un número impar de expediciones la última celda quedaba vacía y enseñaba el fondo de la retícula (un bloque gris). La última tarjeta ocupa la fila entera y no hay hueco. Solo en la retícula de dos: en la de tres, la última tarjeta de un trío no debe estirarse. */ .exps:not(.exps--tres)>.exp:last-child:nth-child(odd){grid-column:1/-1} .exp{background:var(--fondo);padding:0;display:flex;flex-direction:column; transition:background .5s cubic-bezier(.32,.72,0,1)} .exp:hover{background:var(--panel)} .exp .foto{height:270px;background-size:cover;background-position:center;position:relative; filter:saturate(.85);display:block;overflow:hidden} .exp .foto::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,16,19,.20),rgba(15,16,19,.72))} .exp .tag{position:absolute;top:16px;left:16px;z-index:2;background:rgba(15,16,19,.82); border:1px solid var(--linea);padding:7px 13px;color:var(--tinta)} .exp .cuerpo{padding:30px 32px 34px;display:flex;flex-direction:column;flex:1} .exp h3{font-family:var(--D);font-weight:800; font-size:26px;line-height:1.12;letter-spacing:-.01em} .exp .desc{color:var(--apagado);font-size:15.5px;margin-top:12px} /* tabla de especificaciones */ .spec{margin-top:22px;border-top:1px solid var(--linea)} .spec .r{display:flex;justify-content:space-between;align-items:center;gap:16px; padding:10px 0;border-bottom:1px solid var(--linea-2)} /* Las etiquetas de la ficha técnica SÍ se quedan en mayúscula: el mono en caja alta es lo que las hace leer como rótulo de ficha. */ .spec .r span{font-family:var(--M);font-size:11.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--apagado)} .spec .r b{font-family:var(--M);font-size:13px;font-weight:600;color:var(--tinta); text-align:right;display:flex;align-items:center;gap:10px} .exp .pie{margin-top:22px;padding-top:20px;border-top:1px solid var(--linea); display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .exp .precio{font-family:var(--D);font-weight:800; font-size:30px;letter-spacing:-.025em;line-height:1} .exp .precio small{display:block;font-family:var(--M);font-size:11px;font-weight:500; letter-spacing:.04em;color:var(--apagado);margin-top:6px} .exp .ir{font-family:var(--M);font-size:12px;font-weight:600;letter-spacing:.02em; color:var(--naranja);white-space:nowrap} /* ---------- ficha tecnica ---------- */ .ficha{background:var(--panel);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)} .ficha .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .ficha h2{margin-top:16px} .ficha .intro{color:var(--apagado);margin-top:22px;font-size:16.5px;max-width:46ch} .perfil{border:1px solid var(--linea);background:var(--fondo);padding:26px 24px 18px} .perfil .et{color:var(--apagado);display:flex;justify-content:space-between;gap:16px} .perfil svg{display:block;width:100%;height:190px;margin-top:16px} /* Las etiquetas del perfil de elevación llevan `font-family="Archivo"` escrito en el atributo del SVG. La regla de CSS gana al atributo de presentación, así que la tipografía de marca se aplica sin tocar el PHP que genera el SVG. */ .perfil svg text{font-family:var(--D)} .perfil__etapas{margin-top:10px} /* * Tres rótulos bajo el gráfico: salida, cumbre y llegada. * * Con `space-between` —que es lo que pone `.perfil .et`— el del medio solo cae * bajo el pico si los otros dos miden lo mismo, y no es el caso («Día 1 · * aproximación» es mucho más largo que «Llegada»). Va en rejilla de tres * columnas: la del centro es `auto` y queda centrada en el eje del gráfico, * que está en x=300 de un viewBox de 600. * * El selector lleva `.perfil` delante a propósito: `.perfil .et` son dos clases * y le gana a un `.perfil__etapas` suelto, así que sin igualar la especificidad * el `display:grid` no se aplicaría. */ .perfil .perfil__etapas{display:grid;grid-template-columns:1fr auto 1fr;gap:16px} .perfil .perfil__etapas span:nth-child(2){text-align:center} .perfil .perfil__etapas span:nth-child(3){text-align:right} .ficha table{width:100%;border-collapse:collapse;margin-top:26px} .ficha td{padding:12px 0;border-bottom:1px solid var(--linea-2);vertical-align:top} .ficha td:first-child{font-family:var(--M);font-size:11.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--apagado);width:44%} .ficha td:last-child{font-size:15.5px} .nota{font-family:var(--M);font-size:11px;color:var(--apagado-2);letter-spacing:.06em;margin-top:14px} /* listas dentro de la tabla: compactas, sin abrir la fila más de la cuenta */ .ficha td .andes-lista{margin-top:2px} .ficha td .andes-lista li{padding:5px 0 5px 17px;font-size:12.5px} .ficha td .andes-lista li::before{top:10px} /* equipo requerido */ .equipo{margin-top:22px;border:1px solid var(--linea);background:var(--fondo);padding:22px 24px 24px} .equipo .et{color:var(--apagado);display:block;margin-bottom:12px} .equipo ul.andes-lista{columns:2;column-gap:28px} @media(max-width:560px){ .equipo ul.andes-lista{columns:1} } /* ---------- conoce Manizales: la sección del mapa ---------- La v2 del mapa se sale de su contenedor (ancho completo, 78vh) y lo monta el plugin. Por eso aquí ya no hay `.mapa-caja`: ni alto fijo, ni viñeta `::after` con z-index, ni pie absoluto encima. La sección solo le da el sitio. */ .conoce{padding-bottom:0} .mapa-ancho{width:100%;max-width:100%;margin-top:52px; /* El mapa se sale por margen negativo para llegar al borde de la ventana. Con `clip` (o `hidden` como respaldo) ese desborde no arrastra scroll horizontal a la página. */ overflow:hidden} @supports (overflow:clip){ .mapa-ancho{overflow:clip} } .mapa-contenido{width:min(1240px,90vw);margin:52px auto 0} .mapa-ancho>*,.mapa-contenido>*{width:100%} .pie-mapa{background:rgba(15,16,19,.88);border-top:1px solid var(--linea);padding:12px 16px; display:flex;justify-content:space-between;align-items:center;gap:14px} .pie-mapa a{font-family:var(--M);font-size:11.5px;font-weight:600;letter-spacing:.04em; color:var(--naranja)} .leyenda{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} .leyenda span{font-family:var(--M);font-size:11.5px;letter-spacing:.08em;color:var(--apagado); display:flex;align-items:center;gap:7px} .leyenda span::before{content:'';width:9px;height:9px;background:var(--naranja);display:block} /* ---------- bitacora ---------- */ .bit{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--linea)} /* Con menos de tres entradas, la retícula se encoge: si no, las celdas vacías enseñan el fondo de la rejilla y parece que la página se rompió. */ .bit--1{grid-template-columns:1fr} .bit--2{grid-template-columns:repeat(2,1fr)} .ent{background:var(--fondo);padding:30px 30px 34px;display:flex;flex-direction:column; transition:background .5s cubic-bezier(.32,.72,0,1)} .ent:hover{background:var(--panel)} .ent .fecha{font-family:var(--M);font-size:11.5px;letter-spacing:.04em;color:var(--apagado); display:flex;justify-content:space-between;gap:12px} .ent h4{font-family:var(--D);font-weight:800; font-size:21px;line-height:1.2;margin-top:16px} .ent p{color:var(--apagado);font-size:15px;margin-top:12px;flex:1} .ent .leer{font-family:var(--M);font-size:11.5px;font-weight:600;letter-spacing:.02em; color:var(--naranja);margin-top:20px} /* ---------- cta ---------- */ .final{background:var(--naranja);color:#fff;padding:88px 0} .final .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .final h2{color:#fff;font-size:clamp(30px,4.2vw,54px)} .final p{color:rgba(255,255,255,.9);margin-top:16px;font-size:17px;max-width:44ch} .final .acciones{margin-top:0} /* ---------- footer ---------- */ /* * OJO con el selector: va con `footer.` a propósito. * * `.pie` lo usan DOS cosas distintas: el pie del sitio (`