/* ============================================================================ 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; } .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; } } /* ============================================================================ 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; } @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; } .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; } .cima__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--fondo) 0%, rgba(11,12,11,0.45) 30%, rgba(11,12,11,0.55) 70%, 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; } .pie__nota { margin-left: auto; } /* ============================================================================ 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; } .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; } .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; } /* Skratch Punk pega mucho las letras entre sí: un aire pequeño y parejo para que los titulares se lean sin esfuerzo */ .display, .titulo-seccion, .bento__nombre, .cabana__nombre, .paquete__nombre, .visor__titulo { letter-spacing: 0.055em; } /* ============================================================================ 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; } .bento__tarjeta:hover, .cabana:hover, .paquete:hover { transform: none; } .bento__tarjeta:hover .bento__foto, .cabana:hover .cabana__foto { transform: none; } }