/* ============================================================================ H-GO · REDISEÑO ESTILO APPLE · ESTILOS ---------------------------------------------------------------------------- Una sola apariencia, oscura y cinematográfica, a propósito: el parque se vende de noche y de bosque, no de blanco clínico. Paleta oficial del sistema de color H-GO (verde 3DB02F · ámbar F2A100 · fuego EF5120 · carbón 121110 · hueso F6F4EF). Las reglas de movimiento siguen la escuela Apple: · solo transform y opacity (nada que recalcule el layout) · entradas con ease-out, salidas más cortas · todo interrumpible, nada bloquea el scroll · prefers-reduced-motion lo apaga todo de golpe al final del archivo ============================================================================ */ /* ── tipografía de titulares: Skratch Punk (la que mandó Juan) ── Es una display rugosa de un solo peso: los titulares se componen con ella tal cual, sin tracking negativo (sus trazos se encimarían) y con el texto del cuerpo en la del sistema para leer cómodo. */ @font-face { font-family: 'SkratchPunk'; src: url('assets/fonts/Skratch_Punk.ttf') format('truetype'); font-weight: 400; font-display: swap; } :root { /* paleta oficial del logo H-GO — cada color tiene su papel: verde = avance y selección · ámbar = promociones · fuego = ofertas rojo = advertencias y quitar · carbón/hueso = fondo y texto */ --verde: #3DB02F; --ambar: #F2A100; --fuego: #EF5120; --rojo: #D8202B; --carbon: #121110; --hueso: #F6F4EF; /* superficies: el carbón oficial y sus escalones hacia arriba */ --fondo: #0b0c0b; --fondo-2: var(--carbon); --panel: rgba(255, 255, 255, 0.05); --panel-alto: rgba(255, 255, 255, 0.09); --linea: rgba(246, 244, 239, 0.12); /* texto: hueso pleno y sus rebajas (la más tenue da 4.6:1 sobre carbón) */ --texto: var(--hueso); --texto-2: rgba(246, 244, 239, 0.72); --texto-3: rgba(246, 244, 239, 0.55); /* tipografía: Skratch Punk para los titulares, sistema para leer */ --f-display: 'SkratchPunk', system-ui, sans-serif; --f-texto: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ritmo de espaciado en escalones de 8 */ --esp-1: 8px; --esp-2: 16px; --esp-3: 24px; --esp-4: 32px; --esp-6: 48px; --esp-8: 64px; --esp-12: 96px; --esp-16: 128px; --radio: 24px; /* tarjetas */ --radio-ch: 980px; /* píldoras, como los botones de Apple */ /* la curva de casi todo: sale rápido y aterriza suave */ --suave: cubic-bezier(0.23, 1, 0.32, 1); } /* ── base ── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding: 24px 0 80px; } body { font-family: var(--f-texto); background: var(--fondo); color: var(--texto); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ============================================================================ EL LIENZO INVERTIDO · la rueda al revés, como en una Mac ---------------------------------------------------------------------------- Donde hay rueda (puntero fino), el scroll no vive en el body: vive en #lienzo, que va girado 180°, con #contenido girado de vuelta. Todo se lee normal, pero el navegador tiene el documento "de cabeza": la posición 0 del scroll es la BASE (el hero) y girar la rueda hacia abajo SUBE la montaña — con el momentum y la física nativa intactos, porque el navegador no se entera de nada. En el teléfono no se rota: ahí el documento arranca al fondo (lo hace el arranque en index.html) y el gesto natural ya va a favor. ============================================================================ */ /* Sólo la portada es invertida (lleva class="invertida" en su ): las demás páginas del rediseño usan este mismo archivo y scrollean normal. */ @media (pointer: fine) { html.invertida, html.invertida body { height: 100%; overflow: hidden; } #lienzo { height: 100dvh; overflow-y: auto; transform: rotate(180deg); scrollbar-width: none; /* la barra saldría a la izquierda y al revés */ } #lienzo::-webkit-scrollbar { display: none; } #contenido { transform: rotate(180deg); } body.sin-scroll #lienzo { overflow: hidden; } /* visor abierto: quieto */ } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* foco visible siempre: por teclado se tiene que poder recorrer todo */ :focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; } ::selection { background: var(--verde); color: var(--carbon); } /* ── titulares: enormes y protagonistas; Skratch Punk sin tracking negativo ── */ .display { font-family: var(--f-display); font-size: clamp(2.4rem, 6.5vw, 5.2rem); line-height: 1.06; letter-spacing: 0.01em; font-weight: 400; } .titulo-seccion { font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.1; letter-spacing: 0.01em; font-weight: 400; } .pretitulo { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde); } .bajada { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--texto-2); max-width: 34em; } /* ============================================================================ NAVEGACIÓN · barra de vidrio ABAJO, como un dock: en una página que se escala hacia arriba, el suelo es el lugar natural de los controles ============================================================================ */ .nav { position: fixed; inset: auto 0 0 0; z-index: 100; transition: background 0.4s var(--suave), box-shadow 0.4s var(--suave); } .nav.nav--solida { background: rgba(11, 12, 11, 0.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 -1px 0 rgba(246, 244, 239, 0.08); } .nav__int { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; /* dock centrado */ gap: var(--esp-3); padding: 12px var(--esp-3); } .nav__logo img { height: 34px; width: auto; } /* el altímetro: cuánto se ha subido, en metros de verdad (base 2,350 → cima 2,770). Números tabulares para que no baile al cambiar. */ .nav__alti { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radio-ch); background: rgba(255,255,255,0.08); color: var(--texto-2); font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; /* el dato es UNA pieza: la "m" jamás se cae a otra línea */ white-space: nowrap; flex: none; } .nav__alti svg { color: var(--verde); } .nav__enlaces { display: flex; gap: 4px; list-style: none; } .nav__enlaces a { display: inline-block; padding: 10px 14px; font-size: 0.92rem; color: var(--texto-2); border-radius: var(--radio-ch); transition: color 0.2s, background 0.2s; } .nav__enlaces a:hover { color: var(--texto); background: rgba(255,255,255,0.07); } .nav__cta { padding: 10px 22px; background: var(--verde); color: var(--carbon); font-weight: 600; font-size: 0.92rem; border-radius: var(--radio-ch); transition: transform 0.25s var(--suave), background 0.2s; } .nav__cta:hover { background: #4cc43d; } .nav__cta:active { transform: scale(0.96); } @media (max-width: 720px) { .nav__enlaces { display: none; } /* teléfono: sin logo en el dock, altímetro y Reservar van centrados */ .nav__int { justify-content: center; gap: 14px; padding: 10px 14px; } .nav__alti { font-size: 0.78rem; padding: 6px 10px; } .nav__cta { padding: 10px 16px; flex: none; } } /* ============================================================================ HERO · video a pantalla completa con degradado al carbón ============================================================================ */ .hero { position: relative; min-height: 100svh; display: grid; place-items: end center; isolation: isolate; overflow: hidden; } .hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .hero__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(11,12,11,0.55) 0%, rgba(11,12,11,0.15) 35%, rgba(11,12,11,0.35) 70%, var(--fondo) 100%); } .hero__cont { text-align: center; padding: 0 var(--esp-3) clamp(72px, 14vh, 140px); max-width: 900px; } .hero__cont .display { text-shadow: 0 2px 24px rgba(0,0,0,0.45); } .hero__cont .bajada { margin: var(--esp-3) auto 0; text-shadow: 0 1px 12px rgba(0,0,0,0.5); } .hero__botones { display: flex; gap: var(--esp-2); justify-content: center; margin-top: var(--esp-4); flex-wrap: wrap; } /* botones píldora, jerarquía Apple: uno lleno, uno de vidrio */ .boton { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: var(--radio-ch); font-weight: 600; font-size: 1.02rem; transition: transform 0.25s var(--suave), background 0.2s, box-shadow 0.3s; } .boton:active { transform: scale(0.96); } .boton--lleno { background: var(--verde); color: var(--carbon); } .boton--lleno:hover { background: #4cc43d; box-shadow: 0 8px 32px rgba(61,176,47,0.35); } .boton--vidrio { background: rgba(255,255,255,0.14); color: var(--texto); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .boton--vidrio:hover { background: rgba(255,255,255,0.22); } /* flecha de scroll: la página se sube, así que respira HACIA ARRIBA y vive en lo alto del hero (la barra ahora está abajo, aquí queda despejado) */ .hero__flecha { /* con el pie arriba, el hero llena la primera pantalla completo y la flecha puede vivir en todo lo alto */ position: absolute; top: 36px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 2px; color: var(--texto-3); animation: respira 2.6s ease-in-out infinite; } .hero__flecha em { font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .hero__flecha small { font-size: 0.7rem; color: var(--texto-3); letter-spacing: 0.04em; } @keyframes respira { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-8px); opacity: 1; } } /* ============================================================================ SECCIONES ============================================================================ */ .seccion { padding: var(--esp-16) var(--esp-3); } .seccion__int { max-width: 1200px; margin: 0 auto; } .seccion__cabeza { max-width: 760px; margin-bottom: var(--esp-8); } .seccion__cabeza .bajada { margin-top: var(--esp-2); } /* ============================================================================ TEXTO CON DESENFOQUE (BlurText de React Bits, replicado en CSS puro) ---------------------------------------------------------------------------- Los valores son los EXACTOS del componente original (BlurText-JS-CSS, dirección top): cada palabra nace borrosa (blur 10px, opacidad 0, 50px arriba), pasa por un punto medio (blur 5px, 0.5, 5px abajo) y aterriza nítida. Dos pasos de 0.35s y retardo escalonado por palabra (--bt-d). Sin React ni dependencias: el sitio sigue siendo estático. ============================================================================ */ .bt-palabra { display: inline-block; will-change: transform, filter, opacity; filter: blur(10px); opacity: 0; transform: translateY(-50px); } .bt--ya .bt-palabra { animation: btPalabra 0.7s linear both; animation-delay: var(--bt-d, 0ms); } @keyframes btPalabra { 0% { filter: blur(10px); opacity: 0; transform: translateY(-50px); } 50% { filter: blur(5px); opacity: 0.5; transform: translateY(5px); } 100% { filter: blur(0); opacity: 1; transform: translateY(0); } } /* aparición al hacer scroll: como se asciende, lo nuevo entra por ARRIBA del viewport — nace 24px más alto y se asienta bajando, suave */ .revela { opacity: 0; transform: translateY(-24px); transition: opacity 0.7s var(--suave), transform 0.7s var(--suave); } .revela.revela--ya { opacity: 1; transform: none; } /* ============================================================================ ACTIVIDADES · rejilla bento ---------------------------------------------------------------------------- La primera tarjeta (Vía Ferrata, la estrella y la mejor documentada) ocupa doble ancho y doble alto. El resto se acomoda solo. ============================================================================ */ .bento { display: grid; gap: var(--esp-2); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; /* la foto manda: filas altas */ } .bento__tarjeta { position: relative; overflow: hidden; border-radius: var(--radio); background: var(--panel); text-align: left; width: 100%; isolation: isolate; transition: transform 0.45s var(--suave), box-shadow 0.45s var(--suave); } .bento__tarjeta:hover { transform: scale(1.015); box-shadow: 0 18px 48px rgba(0,0,0,0.5); } .bento__tarjeta:active { transform: scale(0.99); } .bento__tarjeta--grande { grid-column: span 2; grid-row: span 2; } .bento__tarjeta--ancha { grid-column: span 2; } /* mientras una foto llega, su marco respira en gris: nada se ve roto */ .bento__tarjeta, .cabana__marco, .visor__carrete > figure, .cinta figure { background-image: linear-gradient(100deg, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 60%); background-size: 220% 100%; animation: brilla 1.6s ease-in-out infinite; } @keyframes brilla { from { background-position: 130% 0; } to { background-position: -30% 0; } } .bento__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--suave); } .bento__tarjeta:hover .bento__foto { transform: scale(1.06); } .bento__velo { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, rgba(11,12,11,0.86) 0%, rgba(11,12,11,0.25) 45%, rgba(11,12,11,0.05) 100%); } .bento__cont { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--esp-3); } .bento__nombre { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -0.01em; line-height: 1.1; } .bento__tarjeta--grande .bento__nombre { font-size: clamp(1.7rem, 3vw, 2.4rem); } .bento__frase { color: var(--texto-2); font-size: 0.95rem; margin-top: 4px; } .bento__pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--esp-2); } .bento__precio { font-weight: 700; font-variant-numeric: tabular-nums; } .bento__precio small { font-weight: 400; color: var(--texto-2); font-size: 0.8em; } /* etiquetas chip: duración, edad, nocturna… */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radio-ch); background: rgba(255,255,255,0.13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.78rem; font-weight: 500; color: var(--texto); } .chip--noche { background: rgba(242,161,0,0.22); color: var(--ambar); } .chip--vivo { background: rgba(61,176,47,0.22); color: #6fdb61; } /* EXPRESS · la etiqueta de la VIP. Ocupa el lugar de la duración y se lee como lo que es: no esperas. Ámbar encendido, con su propio halo. */ .chip--express { background: linear-gradient(120deg, rgba(242,161,0,0.34), rgba(239,81,32,0.30)); color: #ffd479; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(242,161,0,0.45), 0 4px 18px rgba(242,161,0,0.28); } /* ══════════════════════════════════════════════════════════════════════════ LA TARJETA VIP LLEVA MARCO DE LUZ -------------------------------------------------------------------------- Es la tarjeta grande de la rejilla y la que se quiere vender primero, pero se veía igual que las demás: misma foto a sangre, mismo borde invisible. Ahora trae un marco ámbar que respira despacio y un resplandor detrás, así que se distingue antes de leer una sola palabra. El marco va en un ::after SIN relleno y sin eventos, encima de la foto y debajo del texto: no tapa nada ni se come el clic de la tarjeta. ══════════════════════════════════════════════════════════════════════════ */ .bento__tarjeta--vip { box-shadow: 0 0 0 1px rgba(242,161,0,0.30), 0 16px 46px rgba(242,161,0,0.14); } .bento__tarjeta--vip::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; border: 1.5px solid rgba(242,161,0,0.55); box-shadow: inset 0 0 26px rgba(242,161,0,0.20), 0 0 22px rgba(242,161,0,0.30); animation: vip-late 3.4s ease-in-out infinite; } @keyframes vip-late { 0%, 100% { opacity: 0.55; box-shadow: inset 0 0 18px rgba(242,161,0,0.14), 0 0 14px rgba(242,161,0,0.20); } 50% { opacity: 1; box-shadow: inset 0 0 30px rgba(242,161,0,0.26), 0 0 30px rgba(242,161,0,0.40); } } .bento__tarjeta--vip:hover { box-shadow: 0 0 0 1px rgba(242,161,0,0.55), 0 22px 60px rgba(242,161,0,0.26); } /* el nombre de la VIP en ámbar: el marco y el título dicen lo mismo */ .bento__tarjeta--vip .bento__nombre { color: #ffd479; } @media (max-width: 980px) { .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 230px; } .bento__tarjeta--grande, .bento__tarjeta--ancha { grid-column: span 1; grid-row: span 1; } .bento__tarjeta--grande { grid-row: span 2; } } /* ============================================================================ HOSPEDAJES · riel horizontal con scroll-snap, como los carruseles de Apple ============================================================================ */ .riel-marco { overflow: visible; } .riel { display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 78vw); gap: var(--esp-2); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--esp-3); scrollbar-width: none; /* el riel se maneja con gesto y flechas */ } .riel::-webkit-scrollbar { display: none; } .riel > * { scroll-snap-align: start; } .cabana { border-radius: var(--radio); overflow: hidden; background: var(--panel); border: 1px solid var(--linea); display: flex; flex-direction: column; text-align: left; cursor: pointer; transition: transform 0.45s var(--suave), box-shadow 0.45s var(--suave), border-color 0.3s; } .cabana:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,0.45); border-color: rgba(246,244,239,0.22); } .cabana:active { transform: translateY(-2px) scale(0.99); } .cabana__marco { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo-2); } .cabana__foto { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--suave); } .cabana:hover .cabana__foto { transform: scale(1.05); } .cabana__insignias { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; } .cabana__cuerpo { padding: var(--esp-3); display: flex; flex-direction: column; gap: 6px; flex: 1; } .cabana__nombre { font-family: var(--f-display); font-size: 1.3rem; letter-spacing: -0.01em; } .cabana__desc { color: var(--texto-2); font-size: 0.92rem; flex: 1; } .cabana__pie { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--esp-1); gap: 8px; } .cabana__precio { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; } .cabana__precio small { color: var(--texto-2); font-weight: 400; font-size: 0.78em; } .cabana__lugares { color: var(--texto-3); font-size: 0.88rem; } .riel-controles { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--esp-1); } .riel-flecha { width: 44px; height: 44px; border-radius: 50%; background: var(--panel-alto); display: grid; place-items: center; transition: background 0.2s, transform 0.25s var(--suave), opacity 0.2s; } .riel-flecha:hover { background: rgba(255,255,255,0.16); } .riel-flecha:active { transform: scale(0.92); } .riel-flecha[disabled] { opacity: 0.35; cursor: default; } /* ============================================================================ GALERÍA A SANGRE COMPLETA ---------------------------------------------------------------------------- Una cinta de fotos que cruza la pantalla de lado a lado y avanza sola, despacio. Es puro CSS (transform), se pausa al pasar el cursor y se apaga con prefers-reduced-motion. Las fotos ya están en disco: no cuesta red. ============================================================================ */ .cinta-marco { overflow: hidden; padding: var(--esp-2) 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .cinta { display: flex; gap: var(--esp-2); width: max-content; animation: cintaAnda 70s linear infinite; } /* filas apiladas: la de en medio corre AL REVÉS, el bloque entero respira */ .cinta + .cinta { margin-top: var(--esp-2); } .cinta--reversa { animation-direction: reverse; animation-duration: 82s; } /* el cursor sólo detiene SU fila: las otras dos siguen andando */ .cinta:hover { animation-play-state: paused; } .cinta figure { flex: none; height: clamp(160px, 22vh, 250px); border-radius: var(--radio); overflow: hidden; background: var(--panel); } .cinta img { height: 100%; width: auto; display: block; } @keyframes cintaAnda { to { transform: translateX(-50%); } } /* ============================================================================ PAQUETES · cuatro tarjetas de vidrio; la popular lleva halo verde ============================================================================ */ .paquetes { display: grid; gap: var(--esp-2); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; } .paquete { position: relative; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--linea); padding: var(--esp-4) var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); transition: transform 0.45s var(--suave), box-shadow 0.45s var(--suave), border-color 0.3s; } .paquete:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(0,0,0,0.45); } .paquete--popular { border-color: rgba(61,176,47,0.55); background: rgba(61,176,47,0.07); } .paquete__sello { position: absolute; top: -13px; left: var(--esp-3); background: var(--verde); color: var(--carbon); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: var(--radio-ch); } .paquete__nombre { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: -0.01em; } /* la familia Aventúrate: la marca se repite en los cuatro, el NIVEL es lo que hay que leer de un vistazo */ .paquete__nombre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .paquete__marca { color: var(--texto-2); font-size: 0.78em; } .paquete__nivel { color: var(--verde); font-size: 1.05em; } /* la liga con el nombre de sistema: informativa, sin robar atención */ .liga-caja{display:inline-block;margin:0 0 14px;padding:7px 13px;border-radius:var(--radio-ch); background:rgba(255,255,255,.06);border:1px solid var(--linea); color:var(--texto-2);font-size:.83rem} .liga-caja b{color:var(--texto)} /* ── LA ETAPA DESPUÉS DEL PAGO ───────────────────────────────────────── Con el pago resuelto el dock desaparece, así que la pantalla respira y las dos salidas (descargar / seguir) quedan centradas y grandes. */ .post-caja{text-align:center;padding-top:34px;max-width:520px;margin:0 auto} .post-icono{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px} .post-icono--no{background:var(--rojo)} .post-cierre{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px} .post-cierre .boton{min-width:230px;text-align:center} body.sin-dock .paso{padding-bottom:56px} .paquete--popular .paquete__nivel { color: var(--verde); } .paquete__frase { color: var(--texto-2); font-size: 0.95rem; min-height: 2.6em; } .paquete__precio { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .paquete__precio small { display: block; font-size: 0.85rem; font-weight: 400; color: var(--texto-3); letter-spacing: 0; margin-top: 2px; } .paquete__lista { list-style: none; display: grid; gap: 9px; flex: 1; } .paquete__lista li { display: flex; gap: 9px; align-items: flex-start; font-size: 0.93rem; color: var(--texto-2); } .paquete__lista svg { flex: none; margin-top: 3px; color: var(--verde); } .paquete .boton { justify-content: center; } /* ============================================================================ LA CIMA · lo más alto de la página: la reserva ============================================================================ */ .cierre { text-align: center; } .cierre .pretitulo { margin-bottom: var(--esp-2); } .cierre .titulo-seccion { margin-bottom: var(--esp-2); } .cierre .bajada { margin: 0 auto var(--esp-4); } /* la cima lleva el video real de la cumbre corriendo de fondo */ .cima { padding-top: calc(var(--esp-16) + 24px); /* aire en lo más alto */ position: relative; isolation: isolate; overflow: hidden; } .cima__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; /* los dos ocupan el mismo lugar; sólo se ve el que está en turno */ opacity: 0; transition: opacity 1.1s ease; } .cima__video--activo { opacity: 1; } @media (prefers-reduced-motion: reduce) { .cima__video { transition: none; } } .cima__velo { position: absolute; inset: -2px; z-index: -1; /* curva SUAVE, sin quiebres: los tramos de antes (0→30, 70→100) cambiaban de pendiente de golpe y el ojo dibujaba una línea justo donde empezaba el difuminado (bandas de Mach). Muchos pasos pequeños = cero líneas. */ background: linear-gradient(to bottom, var(--fondo) 0%, rgba(11, 12, 11, 0.97) 6%, rgba(11, 12, 11, 0.88) 13%, rgba(11, 12, 11, 0.74) 21%, rgba(11, 12, 11, 0.62) 30%, rgba(11, 12, 11, 0.52) 42%, rgba(11, 12, 11, 0.50) 50%, rgba(11, 12, 11, 0.52) 58%, rgba(11, 12, 11, 0.62) 70%, rgba(11, 12, 11, 0.74) 79%, rgba(11, 12, 11, 0.88) 87%, rgba(11, 12, 11, 0.97) 94%, var(--fondo) 100%); } .cima .titulo-seccion, .cima .bajada { text-shadow: 0 2px 18px rgba(0,0,0,0.55); } /* la leyenda de los paquetes: el "desde" explicado en una línea */ .paquetes__leyenda { margin-top: var(--esp-2); color: var(--texto-3); font-size: 0.82rem; max-width: 46em; } /* con la barra abajo, lo último de la base no debe quedar tapado por ella */ .hero__cont { padding-bottom: clamp(96px, 16vh, 160px); } /* ============================================================================ PIE ============================================================================ */ /* la barra informativa vive en lo más alto: su línea la separa de la cima que viene debajo */ .pie { border-bottom: 1px solid var(--linea); padding: var(--esp-6) var(--esp-3); color: var(--texto-3); font-size: 0.88rem; } .pie__int { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; /* centrado */ gap: var(--esp-3); flex-wrap: wrap; text-align: center; } .pie__int img { height: 26px; opacity: 0.7; } /* ── el pie con lo que la gente busca antes de pagar ──────────────────── */ .pie__ancho { max-width: 1100px; margin: 0 auto; } .pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-4) var(--esp-5); text-align: left; } .pie__titulo { font-family: var(--f-display); font-size: 0.95rem; font-weight: 600; color: var(--texto-1); margin: 0 0 0.7rem; letter-spacing: 0.01em; } .pie__texto { margin: 0 0 0.8rem; line-height: 1.55; } .pie__texto b { color: var(--texto-2); font-weight: 600; } .pie__fino { margin: 0.7rem 0 0; font-size: 0.8rem; color: var(--texto-3); opacity: 0.85; } .pie__enlace { display: inline-block; color: var(--verde); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } .pie__enlace:hover { border-bottom-color: var(--verde); } .pie__lista { margin: 0; padding: 0; list-style: none; } .pie__lista li { position: relative; padding-left: 0.95rem; margin-bottom: 0.55rem; line-height: 1.5; } .pie__lista li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 50%; background: var(--verde); } .pie__lista b { color: var(--texto-2); font-weight: 600; } .pie__cierre { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: space-between; align-items: baseline; margin-top: var(--esp-5); padding-top: var(--esp-3); border-top: 1px solid var(--linea); } .pie__nota { color: var(--texto-3); opacity: 0.8; } /* ============================================================================ VISOR DE FOTOS (lightbox) ---------------------------------------------------------------------------- Se abre desde la tarjeta y "se materializa": escala + desenfoque del fondo. Carrusel con scroll-snap nativo: interrumpible por definición. ============================================================================ */ .visor { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto 1fr auto; background: rgba(8, 9, 8, 0.82); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--suave); } .visor.visor--abierto { opacity: 1; pointer-events: auto; } .visor__panel { transform: scale(0.96); opacity: 0; transition: transform 0.4s var(--suave), opacity 0.4s var(--suave); display: contents; /* el panel son sus tres filas */ } .visor--abierto .visor__panel { transform: none; opacity: 1; } .visor__cabeza { display: flex; align-items: center; gap: var(--esp-2); padding: var(--esp-3); max-width: 1100px; width: 100%; margin: 0 auto; } .visor__titulo { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: -0.01em; } .visor__precio { color: var(--texto-2); font-variant-numeric: tabular-nums; } .visor__cerrar { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; transition: background 0.2s, transform 0.25s var(--suave); } .visor__cerrar:hover { background: rgba(255,255,255,0.2); } .visor__cerrar:active { transform: scale(0.9); } .visor__carrete { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--esp-2); overflow-x: auto; scroll-snap-type: x mandatory; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 var(--esp-3); scrollbar-width: none; align-items: center; } .visor__carrete::-webkit-scrollbar { display: none; } /* el marco del carrete: de aquí cuelgan las flechas, sin viajar con el scroll */ .visor__marco { position: relative; min-height: 0; display: grid; } .carrete-flecha { position: absolute; top: 50%; translate: 0 -50%; z-index: 6; width: 46px; height: 46px; border-radius: 50%; background: rgba(8, 9, 8, 0.55); color: var(--hueso); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; transition: background 0.2s; } .carrete-flecha:hover { background: rgba(8, 9, 8, 0.85); } /* pegadas al área de la foto (el carrete se centra a 1100px máximo) */ .carrete-flecha--izq { left: max(14px, calc(50% - 550px + 14px)); } .carrete-flecha--der { right: max(14px, calc(50% - 550px + 14px)); } /* en pantalla táctil se desliza con el dedo: las flechas sobran */ @media (pointer: coarse) { .carrete-flecha { display: none; } } .visor__carrete > figure { scroll-snap-align: center; height: min(62vh, 640px); border-radius: var(--radio); overflow: hidden; background: var(--fondo-2); display: grid; place-items: center; } /* LA FOTO NO SE RECORTA NI SE AGRANDA: se ve entera, a su proporción, y nunca por encima de su resolución real (máximos, no forzados). El marco oscuro rellena lo que sobre. Clic = abrirla a tamaño completo. */ .visor__carrete img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-in; } .visor__pie { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3); max-width: 1100px; width: 100%; margin: 0 auto; } .visor__datos { display: flex; gap: 10px; flex-wrap: wrap; } .visor__desc { color: var(--texto-2); font-size: 0.95rem; max-width: 46em; } /* lo que incluye la actividad: dos columnas en pantalla ancha, una en el teléfono. Hoy sólo la VIP la usa; el resto la trae vacía y oculta. */ .visor__incluye { list-style: none; margin: 12px 0 0; padding: 0; max-width: 46em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } .visor__incluye li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: var(--texto-2); line-height: 1.35; } .visor__incluye li svg { flex: none; margin-top: 2px; color: var(--verde); } @media (max-width: 720px) { .visor__incluye { grid-template-columns: 1fr; } } .visor__pie .boton { margin-left: auto; flex: none; } @media (max-width: 720px) { .visor__pie { flex-direction: column; align-items: flex-start; gap: var(--esp-2); } .visor__pie .boton { margin-left: 0; } } /* el fondo no se desplaza mientras el visor está abierto */ body.sin-scroll { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ EL AIRE ENTRE LETRAS DE SKRATCH PUNK -------------------------------------------------------------------------- Es una display rugosa de trazo grueso: sus letras se tocan entre sí y hay palabras que se leen como un borrón (las dobles —LL, TT— y todo lo que lleva acento). Con 0.055em todavía se pegaban en pantallas chicas. Ahora el aire es de 0.09em y va en TODO lo que usa la fuente de titulares, no sólo en cuatro selectores sueltos: antes el pie de página y las preguntas quedaban fuera de la lista y se leían peor que el resto. Si algún día se cambia, se cambia AQUÍ: las reglas de arriba dejan su letter-spacing propio y ésta las pisa a todas. OJO: `.hero__slogan` NO entra. Va en la fuente de leer con 0.3em, y así lo pidió Juan; tocarlo aquí sólo confundiría al siguiente que lea esto. ══════════════════════════════════════════════════════════════════════════ */ .titulo-seccion, .bento__nombre, .cabana__nombre, .paquete__nombre, .visor__titulo, .pie__titulo, .pregunta__q { letter-spacing: 0.09em; } /* los titulares enormes necesitan un poco menos: a ese tamaño el hueco ya se ve solo, y de más la palabra se desarma */ .display { letter-spacing: 0.075em; } /* ============================================================================ ACCESIBILIDAD DE MOVIMIENTO · lo animado se vuelve fundido sencillo ============================================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .revela { transition: opacity 0.3s ease; transform: none; } .hero__flecha { animation: none; } .bt-palabra { filter: none; opacity: 1; transform: none; animation: none !important; } .cinta { animation: none; } .cinta-marco { overflow-x: auto; } /* sin animación, la cinta se recorre a mano */ .bento__tarjeta, .bento__foto, .cabana, .cabana__foto, .paquete, .boton, .nav__cta, .visor, .visor__panel { transition: none; } /* el marco de la VIP se queda encendido, fijo: sigue distinguiéndose sin latir (quien pide menos movimiento no debe perder la señal) */ .bento__tarjeta--vip::after { animation: none; opacity: 1; } .bento__tarjeta:hover, .cabana:hover, .paquete:hover { transform: none; } .bento__tarjeta:hover .bento__foto, .cabana:hover .cabana__foto { transform: none; } } /* ── LA LUPA · la foto se abre DENTRO de la página, nunca en otra pestaña ── Fondo difuminado (blur) detrás; la imagen entera y a su proporción real: contain + nunca-agrandar = cero distorsión. Clic afuera o Esc la cierra. */ .lupa { /* SIEMPRE encima de todo: el visor de actividades vive en z 200 y la lupa nace desde dentro de él */ position: fixed; inset: 0; z-index: 300; background: rgba(8, 9, 8, 0.55); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.28s var(--suave); cursor: zoom-out; } .lupa.abierta { opacity: 1; pointer-events: auto; } .lupa img { /* contra el VIEWPORT, no contra la celda del grid: el max-height en % dentro de un grid con fila auto no aplica y la foto se salía de la pantalla. Con vw/dvh la foto SIEMPRE cabe entera. */ max-width: calc(100vw - 36px); max-height: calc(100dvh - 36px); width: auto; height: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); transform: scale(0.96); transition: transform 0.28s var(--suave); } .lupa.abierta img { transform: none; } .lupa__cerrar { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: var(--hueso); display: grid; place-items: center; } .lupa__cerrar:hover { background: rgba(255, 255, 255, 0.24); } @media (prefers-reduced-motion: reduce) { .lupa, .lupa img { transition: none; } } /* la oferta del paquete: el gancho del Aventúrate, imposible de no ver */ .paquete__oferta { display: inline-block; justify-self: start; margin: 2px 0 2px; padding: 5px 12px; border-radius: var(--radio-ch); background: var(--fuego); color: #fff; font-size: 0.78rem; font-weight: 800; line-height: 1.3; } /* la condición del 50%, en letra chica bajo la píldora */ .paquete__letrachica { display: block; justify-self: start; margin: 0 0 6px; font-size: 0.68rem; font-weight: 600; line-height: 1.35; color: var(--tenue, #9a978f); } /* ── HERO CON EL LOGO DE PROTAGONISTA · el dock va sin logo y centrado ── */ .hero__logo { width: clamp(230px, 38vw, 440px); height: auto; margin: 6px auto 2px; display: block; filter: drop-shadow(0 10px 34px rgba(0, 0, 0, 0.55)); } .hero__slogan { /* en la letra de LEER, no la de títulos (lo pidió Juan): fina y espaciada */ font-family: var(--f-texto); font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: 0.3em; text-transform: uppercase; color: var(--hueso); margin-bottom: 10px; } /* la invitación pequeña de la cima, en letra normal */ .cima__ven { font-size: 1rem; color: var(--texto-2); margin: 2px 0 14px; } /* dos fotos verticales comparten una pantalla del carrete, lado a lado */ .visor__carrete > figure.figura--doble { display: flex; gap: 10px; align-items: center; justify-content: center; } .figura--doble img { max-width: calc(50% - 5px); } /* ═══════════════════════════════════════════════════════════════════════ LA ESPERA DE DESPUÉS DE PAGAR Es el único momento del sitio en que cerrar la página tiene consecuencias: el cobro ya salió y el boleto se está armando. La cuerda que gira dice que algo está pasando, y el aviso dice qué hacer: nada, esperar. ═══════════════════════════════════════════════════════════════════════ */ .espera { text-align: center; padding: 56px 0 24px; } .espera__aro { width: 62px; height: 62px; margin: 0 auto 26px; border: 3px solid var(--linea, #2a2a28); border-top-color: var(--verde); border-radius: 50%; animation: giraAro 900ms linear infinite; } @keyframes giraAro { to { transform: rotate(360deg); } } .espera h1 { margin: 0 0 10px; } .espera__nota { color: var(--tenue, #8f8f89); margin: 0 auto; max-width: 40ch; } .espera__aviso { margin: 26px auto 0; max-width: 34rem; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: 14px; background: #2a2416; border: 1px solid #5c5029; } .espera__aviso svg { flex: none; margin-top: 1px; color: #e6cf8a; } .espera__aviso b { display: block; color: #e6cf8a; font-size: .95rem; margin-bottom: 3px; } .espera__aviso span { color: #cbbf9a; font-size: .88rem; line-height: 1.5; } /* quien pidió menos movimiento ve el aro latir en vez de girar */ @media (prefers-reduced-motion: reduce) { .espera__aro { animation: esperaLate 1.6s ease-in-out infinite; } @keyframes esperaLate { 0%,100% { opacity: 1; } 50% { opacity: .45; } } } /* ============================================================================ PREGUNTAS FRECUENTES ---------------------------------------------------------------------------- Cerradas por omisión y una a la vez: doce respuestas abiertas son un muro que nadie lee. Se usa
nativo, así que funciona con teclado y con lector de pantalla sin JavaScript de por medio. ============================================================================ */ .preguntas { max-width: 760px; margin: var(--esp-4) auto 0; } .pregunta { border-bottom: 1px solid var(--linea); } .pregunta__q { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 1.02rem; font-weight: 600; color: var(--texto-1); letter-spacing: 0.005em; transition: color 0.15s ease; } .pregunta__q::-webkit-details-marker { display: none; } .pregunta__q:hover { color: var(--verde); } .pregunta__q:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 6px; } /* la cruz que gira: cerrada es +, abierta es × */ .pregunta__mas { position: relative; width: 15px; height: 15px; flex: none; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .pregunta__mas::before, .pregunta__mas::after { content: ''; position: absolute; inset: 0; margin: auto; background: var(--verde); border-radius: 2px; } .pregunta__mas::before { width: 15px; height: 2px; } .pregunta__mas::after { width: 2px; height: 15px; transition: opacity 0.28s ease; } .pregunta[open] .pregunta__mas { transform: rotate(135deg); } .pregunta__r { padding: 0 0 1.3rem; max-width: 62ch; color: var(--texto-3); line-height: 1.62; font-size: 0.95rem; animation: preguntaAbre 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes preguntaAbre { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pregunta__mas { transition: none; } .pregunta__r { animation: none; } } /* ============================================================================ WHATSAPP FLOTANTE ---------------------------------------------------------------------------- Fuera del lienzo rotado a propósito: dentro heredaría el giro de 180° de la portada y saldría de cabeza. Se sienta arriba del dock para no taparlo. ============================================================================ */ .wa { position: fixed; right: 20px; bottom: 84px; z-index: 120; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #0b0c0b; box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.55), 0 2px 8px rgba(0,0,0,0.35); transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave); } .wa:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 38px -8px rgba(37, 211, 102, 0.7), 0 2px 8px rgba(0,0,0,0.35); } .wa:active { transform: scale(0.96); } .wa:focus-visible { outline: 3px solid var(--hueso); outline-offset: 3px; } @media (max-width: 720px) { .wa { right: 14px; bottom: 76px; width: 50px; height: 50px; } } @media (prefers-reduced-motion: reduce) { .wa { transition: none; } } /* ── las redes, en el cierre del pie ── */ .pie__redes { display: inline-flex; gap: 14px; align-items: center; } .pie__redes a { color: var(--texto-3); transition: color 0.18s ease, transform 0.18s var(--suave); display: grid; place-items: center; } .pie__redes a:hover { color: var(--verde); transform: translateY(-2px); } /* enlace dentro de una respuesta */ .pregunta__link { color: var(--verde); border-bottom: 1px solid rgba(61, 176, 47, 0.4); transition: border-color 0.15s ease; } .pregunta__link:hover { border-bottom-color: var(--verde); } /* dentro de una respuesta: la letra chica y el aviso que no se puede saltar */ .pregunta__fino { color: var(--texto-3); opacity: 0.8; font-size: 0.88em; } .pregunta__aviso { display: block; margin-top: 4px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(216, 32, 43, 0.28); background: rgba(216, 32, 43, 0.07); color: var(--texto-2); font-size: 0.92em; line-height: 1.55; } /* enlace a la página del cliente bajo los botones de descarga */ .docs__pie { margin-top: 18px; text-align: center; font-size: 0.85rem; color: var(--texto-3); line-height: 1.5; } .docs__pie a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }