/* Estilos de la lista de presupuestos. Los usan la home y las páginas por destino. */ /* ── Presupuestos: filtros + lista que se abre ── */ .pr-filtros { max-width: 780px; margin: 0 auto 2rem; } .pr-f-linea { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; flex-wrap: wrap; } .pr-f-tit { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); min-width: 104px; text-align: right; } .pr-f-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1; } .pr-chip { font-family: 'Raleway', sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--text-mid); background: #fff; border: 1px solid var(--warm); padding: 0.42rem 0.85rem; border-radius: 100px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; /* 44 px es el minimo comodo para tocar con el dedo; venian midiendo 32 y se erraba el chip. */ min-height: 44px; display: inline-flex; align-items: center; } .pr-chip:hover { border-color: var(--sky-mid); } .pr-chip.on { background: var(--sky-soft); border-color: var(--sky-soft); color: var(--ivory); } .pr-cuenta { text-align: center; font-size: 0.78rem; color: var(--text-soft); font-style: italic; font-family: 'Playfair Display', serif; margin-top: 1rem; } .pr-lista { max-width: 780px; margin: 0 auto; } .pr { border: 1px solid var(--warm); border-radius: 1.1rem; background: #fff; margin-bottom: 0.75rem; overflow: hidden; transition: box-shadow .2s, border-color .2s; } .pr.abierto { border-color: var(--sky-mid); box-shadow: 0 6px 22px var(--sombra); } .pr-cab { display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left; background: none; border: none; padding: 1.05rem 1.15rem; cursor: pointer; font-family: 'Raleway', sans-serif; color: var(--text); } .pr-emoji { font-size: 1.55rem; flex-shrink: 0; } .pr-cab-txt { flex: 1; min-width: 0; } .pr-titulo { display: block; font-family: 'Playfair Display', serif; font-size: 1.05rem; line-height: 1.2; } .pr-sub { display: block; font-size: 0.75rem; color: var(--text-mid); margin-top: 0.18rem; } .pr-desde { flex-shrink: 0; text-align: right; font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--text); line-height: 1.1; } .pr-desde small { display: block; font-family: 'Raleway', sans-serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); } .pr-flecha { flex-shrink: 0; color: var(--text-soft); font-size: 1.1rem; line-height: 1; transition: transform .2s; } .pr.abierto .pr-flecha { transform: rotate(180deg); } .pr-det { padding: 0 1.15rem 1.3rem; border-top: 1px solid var(--cream); } .pr-fechas { font-size: 0.86rem; color: var(--text); margin: 1rem 0 0.4rem; font-weight: 500; } .pr-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--text-mid); margin-bottom: 1rem; } .pr-caja { background: var(--ivory); border-radius: 0.9rem; padding: 0.9rem 1rem; margin-bottom: 0.8rem; } .pr-caja h4 { font-family: 'Raleway', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 0.6rem; } .pr-dia, .pr-item { font-size: 0.84rem; line-height: 1.55; color: var(--text); margin-bottom: 0.3rem; } .pr-dia b { color: var(--sky-soft); margin-right: 0.35rem; } .pr-fila { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--warm); } .pr-fila:last-child { border-bottom: none; } .pr-f-nom { font-size: 0.86rem; font-weight: 500; } .pr-f-sub { font-size: 0.72rem; color: var(--text-soft); font-weight: 400; } .pr-f-precio { font-family: 'Playfair Display', serif; font-size: 1rem; white-space: nowrap; } .pr-promo { font-size: 0.78rem; color: var(--gold); margin-bottom: 0.8rem; } .pr-precio-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 0.9rem; } .pr-precio { font-family: 'Playfair Display', serif; font-size: 1.75rem; } .pr-precio-nota { font-size: 0.76rem; color: var(--text-mid); } .pr-nota { font-size: 0.8rem; color: var(--text-mid); line-height: 1.5; margin-bottom: 0.9rem; } .pr-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: #25D366; color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600; padding: 0.75rem 1.4rem; border-radius: 100px; } .pr-wa:hover { background: #1fb855; } .pr-legal { font-size: 0.68rem; color: var(--text-soft); margin-top: 0.7rem; } .pr-vacio { text-align: center; color: var(--text-mid); font-size: 0.9rem; padding: 2rem 1rem; } .pr-pie { text-align: center; font-size: 0.85rem; color: var(--text-mid); margin-top: 2rem; } @media (max-width: 560px) { .pr-f-tit { min-width: 0; text-align: left; width: 100%; margin-bottom: 0.1rem; } .pr-cab { padding: 0.9rem; gap: 0.6rem; } .pr-emoji { font-size: 1.3rem; } .pr-titulo { font-size: 0.95rem; } .pr-desde { font-size: 0.95rem; } .pr-wa { width: 100%; } } /* ── Temas de color. El destino define el color; Navidad y Año Nuevo lo pisan. t1..t3 = el degradé del fondo cuando se abre · acc = el color que resalta tint = el fondo suave del emoji cuando está cerrado ── */ .pr[data-tema="navidad"], .pr-dest a[data-tema="navidad"] { --t1:#123d2e; --t2:#1c5a42; --t3:#8f1d2c; --acc:#d9b56a; --acc2:#f1d38f; --tint:#e8f0ea; --deco:"✦ ❄ ✦ ❄ ✦"; } .pr[data-tema="oceano"], .pr-dest a[data-tema="oceano"] { --t1:#0b3a4f; --t2:#0f6a80; --t3:#1b8a9a; --acc:#7fd4d4; --acc2:#b6ecea; --tint:#e4f2f4; --deco:"〰 ⚓ 〰 ⚓ 〰"; } .pr[data-tema="alaska"], .pr-dest a[data-tema="alaska"] { --t1:#0e2a3f; --t2:#2f7fa6; --t3:#9fd4e3; --acc:#a9e0f0; --acc2:#dcf3fa; --tint:#e7f4f9; --deco:"❄ 🏔 ❄ 🏔 ❄"; } .pr[data-tema="disney"], .pr-dest a[data-tema="disney"] { --t1:#16325c; --t2:#24508f; --t3:#5a3f8f; --acc:#e8c46a; --acc2:#f6dfa4; --tint:#e8edf6; --deco:"✦ ✧ ✦ ✧ ✦"; } .pr[data-tema="disney-b"], .pr-dest a[data-tema="disney-b"] { --t1:#1f3b86; --t2:#3f7ad1; --t3:#86c6f0; --acc:#f2d58c; --acc2:#f9e9bd; --tint:#eaf0fb; --deco:"✧ ✦ ✧ ✦ ✧"; } .pr[data-tema="universal"], .pr-dest a[data-tema="universal"]{ --t1:#123f3a; --t2:#1d6b5c; --t3:#3f8f57; --acc:#f0a84e; --acc2:#f8cb92; --tint:#e6f1ee; --deco:"◆ ◈ ◆ ◈ ◆"; } .pr[data-tema="universal-b"], .pr-dest a[data-tema="universal-b"]{ --t1:#1d3a1f; --t2:#3d7a33; --t3:#7fb04e; --acc:#f5c04e; --acc2:#fade9b; --tint:#ecf3e6; --deco:"◈ ◆ ◈ ◆ ◈"; } .pr[data-tema="paris"], .pr-dest a[data-tema="paris"] { --t1:#4a2040; --t2:#7a3560; --t3:#b06a86; --acc:#f0b7c8; --acc2:#f8d9e2; --tint:#f7ebf0; --deco:"✦ ⚜ ✦ ⚜ ✦"; } .pr[data-tema="paris-b"], .pr-dest a[data-tema="paris-b"] { --t1:#5c2030; --t2:#9c4254; --t3:#d08a92; --acc:#f6c3a8; --acc2:#fbe0d1; --tint:#f9eeea; --deco:"⚜ ✦ ⚜ ✦ ⚜"; } .pr[data-tema="anonuevo"], .pr-dest a[data-tema="anonuevo"] { --t1:#2b1b4a; --t2:#4a3a8f; --t3:#8f6ac0; --acc:#f2d98b; --acc2:#fbeec1; --tint:#eeeaf7; --deco:"✦ 🎆 ✦ 🎆 ✦"; } /* ── Los cuatro destinos, con el color de cada uno ── Mismo degrade y mismo acento que los presupuestos de ese destino: el color significa lo mismo en toda la pagina. */ /* El link a la pagina de precios: era una pildora blanca mas entre otras y se perdia. Ahora es una tarjeta con el color de la marca. */ .pr-cuanto { display: block; max-width: 780px; margin: 0 auto 2rem; padding: 1.3rem 1.4rem; border-radius: 1.2rem; text-decoration: none; background: linear-gradient(135deg, var(--sky-pale) 0%, #dceaf3 100%); border: 1px solid var(--sky-mid); text-align: center; transition: transform .15s, box-shadow .15s; } .pr-cuanto:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--sombra); } .pr-cuanto-tit { display: block; font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--text); margin-bottom: .4rem; } .pr-cuanto-sub { display: block; font-size: .88rem; line-height: 1.6; color: var(--text-mid); max-width: 520px; margin: 0 auto .7rem; } .pr-cuanto-ir { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--sky-soft); } @media (max-width: 560px) { .pr-cuanto-tit { font-size: 1.15rem; } } .pr-dest-cab { max-width: 780px; margin: 0 auto .9rem; padding: 0 1.2rem; text-align: center; } .pr-dest-cab h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; color: var(--text); margin-bottom: .3rem; } .pr-dest-cab p { font-size: .88rem; line-height: 1.6; color: var(--text-mid); max-width: 480px; margin: 0 auto; } .pr-dest { max-width: 780px; margin: 0 auto 2rem; padding: 0 1.2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; } .pr-dest a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: 1.1rem .6rem 1rem; border-radius: 1.1rem; text-decoration: none; text-align: center; color: #fff; background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 58%, var(--t3) 135%); box-shadow: 0 5px 18px var(--sombra); transition: transform .15s, box-shadow .15s; } .pr-dest a:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--sombra); } .pr-dest-emoji { font-size: 1.7rem; line-height: 1; } .pr-dest-nom { font-family: 'Playfair Display', serif; font-size: .95rem; line-height: 1.2; } .pr-dest-pie { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); } @media (max-width: 640px) { .pr-dest { grid-template-columns: repeat(2, 1fr); } .pr-dest-nom { font-size: .88rem; } } /* cerrado: una barra de color a la izquierda y el emoji sobre su tono */ .pr { border-left: 4px solid var(--acc); } .pr-emoji { background: var(--tint); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: background .2s; } .pr-desde { color: var(--t2); } .pr:hover { border-color: var(--acc); } /* abierto: la tarjeta entera se pone de gala, como las de antes */ .pr.abierto { position: relative; overflow: hidden; color: #fff; border-color: var(--acc); background: linear-gradient(135deg, var(--t1) 0%, var(--t2) 58%, var(--t3) 135%); box-shadow: 0 18px 44px rgba(18,40,60,0.3); } .pr.abierto::after { content: var(--deco); position: absolute; top: .7rem; right: -1rem; font-size: 1.15rem; letter-spacing: .55rem; color: rgba(255,255,255,.13); transform: rotate(8deg); pointer-events: none; } .pr.abierto .pr-cab { color: #fff; position: relative; z-index: 1; } .pr.abierto .pr-emoji { background: rgba(255,255,255,.16); } .pr.abierto .pr-titulo { color: #fff; } .pr.abierto .pr-sub { color: rgba(255,255,255,.72); } .pr.abierto .pr-desde { color: var(--acc2); } .pr.abierto .pr-desde small { color: rgba(255,255,255,.6); } .pr.abierto .pr-flecha { color: var(--acc); } .pr.abierto .pr-det { border-top-color: rgba(255,255,255,.18); position: relative; z-index: 1; } .pr.abierto .pr-fechas { color: #fff; } .pr.abierto .pr-meta { color: rgba(255,255,255,.85); } .pr.abierto .pr-caja { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); } .pr.abierto .pr-caja h4 { color: var(--acc2); } .pr.abierto .pr-dia, .pr.abierto .pr-item { color: rgba(255,255,255,.94); } .pr.abierto .pr-dia b { color: var(--acc2); } .pr.abierto .pr-fila { border-bottom-color: rgba(255,255,255,.16); } .pr.abierto .pr-f-sub { color: rgba(255,255,255,.62); } .pr.abierto .pr-f-precio { color: var(--acc2); } .pr.abierto .pr-promo { color: var(--acc2); background: rgba(255,255,255,.1); border: 1px dashed var(--acc); border-radius: 12px; padding: .55rem .85rem; } .pr.abierto .pr-precio { color: #fff; } .pr.abierto .pr-precio-nota { color: rgba(255,255,255,.8); } .pr.abierto .pr-nota { color: rgba(255,255,255,.88); } .pr.abierto .pr-nota strong { color: var(--acc2); } .pr.abierto .pr-legal { color: rgba(255,255,255,.55); } .pr.abierto .pr-wa { background: var(--acc); color: var(--t1); font-weight: 700; letter-spacing: .04em; } .pr.abierto .pr-wa:hover { background: var(--acc2); } /* Enlaces a las páginas de cada destino */ .pr-destinos { max-width: 780px; margin: 2.4rem auto 0; padding-top: 1.8rem; border-top: 1px solid var(--warm); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; } .pr-destinos p { width: 100%; text-align: center; font-size: .78rem; color: var(--text-soft); font-style: italic; font-family: 'Playfair Display', serif; margin-bottom: .5rem; } .pr-destinos a { text-decoration: none; color: var(--text-mid); font-size: .82rem; padding: .5rem 1rem; border: 1px solid var(--warm); border-radius: 100px; background: #fff; transition: border-color .12s, color .12s; } .pr-destinos a:hover { border-color: var(--sky-mid); color: var(--text); } /* Arriba de los filtros no lleva línea: viene pegado al encabezado */ .pr-destinos.arriba { margin: 0 auto 2.2rem; padding-top: 0; border-top: none; } .pr-destinos.arriba p { font-size: .8rem; } /* Los destinos al pie de la home: una fila mas, chiquita, arriba de Instagram y WhatsApp. Para saltar a cualquier destino desde donde sea. */ .footer-destinos { margin-bottom: .5rem; } .footer-destinos a { font-size: .78rem; } /* ── Mensajes de viajeros ── Las capturas son de altos muy distintos (la de Tupi mide 747x1312), asi que se preparan en cuadrado (_tools/tarjetas_resenas.py): el recorte se elige mirando cada una, y la apaisada va entera sobre blanco. El navegador no recorta nada, por eso no corta frases por la mitad. Leerlas de verdad es tocarlas: resenas.js abre la captura original. */ .rs-grid { max-width: 1140px; margin: 0 auto; padding: 0 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: start; } /* La fila de mensajes va de a cuatro: con tres columnas quedaba uno solo en una segunda fila. */ .rs-grid-2 { margin-top: 1.2rem; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .rs-grid figure { background: #fff; border: 1px solid var(--warm); border-radius: 1.1rem; overflow: hidden; box-shadow: 0 4px 16px var(--sombra); } .rs-grid > figure > img { width: 100%; aspect-ratio: 1 / 1; height: auto; display: block; background: #fff; } /* El alto minimo empareja las tarjetas de una fila: un pie de dos lineas dejaba una 18 px mas alta que las otras dos. */ .rs-grid figcaption { padding: .7rem .9rem; font-size: .82rem; color: var(--text-soft); font-style: italic; font-family: 'Playfair Display', serif; text-align: center; line-height: 1.35; min-height: 3.6rem; display: flex; align-items: center; justify-content: center; } .rs-pie { max-width: 1140px; margin: 1.2rem auto 0; padding: 0 1.2rem; text-align: center; font-size: .78rem; color: var(--text-soft); font-style: italic; } /* Las fotos del viaje de Tupi: plegadas, porque cinco mas ocupaban media pantalla. Mismo gesto que las preguntas de las paginas de destino. */ .rs-mas { max-width: 1140px; margin: .9rem auto 0; padding: 0 1.2rem; } .rs-mas summary { list-style: none; cursor: pointer; padding: .5rem; font-size: .82rem; color: var(--sky-soft); text-align: center; font-weight: 600; } .rs-mas summary::-webkit-details-marker { display: none; } .rs-mas summary::after { content: ' +'; } .rs-mas[open] summary::after { content: ' –'; } .rs-fotos { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; padding: .6rem 0 .2rem; } .rs-fotos img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .45rem; display: block; } /* La lupa: la imagen entera, a pantalla completa */ /* Por encima del encabezado (100) y del boton de WhatsApp (200): si no, le tapan la cruz de cerrar. */ .rs-lupa { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(26, 24, 22, .92); cursor: zoom-out; } .rs-lupa.abierta { display: flex; } .rs-lupa img { max-width: 100%; max-height: 100%; border-radius: .6rem; box-shadow: 0 10px 40px rgba(0,0,0,.5); } .rs-lupa-x { position: absolute; top: .8rem; right: 1rem; width: 2.4rem; height: 2.4rem; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; } /* En el celular apiladas median casi dos pantallas. Van en una fila que se desliza, como las historias: se ven las cuatro igual y entra en una. La tarjeta ocupa el 78% del ancho para que se asome la de al lado y se note que hay mas. */ @media (max-width: 560px) { /* Deslizar de costado escondia la mitad: la segunda tarjeta se asomaba cortada y la tercera no se veia nunca. En el celular se apilan, cada una entera y del ancho de la pantalla. */ .rs-grid { display: grid; grid-template-columns: 1fr; max-width: none; padding: .2rem 1.2rem 1rem; gap: .9rem; } .rs-grid > figure { width: 100%; } /* Los mensajes no se deslizan: son cuatro y entran de a dos por fila, que se leen de un vistazo sin tener que descubrir que hay mas. */ .rs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .2rem; overflow: visible; } .rs-grid-2 > figure { flex: none; } .rs-grid-2 figcaption { font-size: .74rem; padding: .5rem .5rem; min-height: 3rem; } .rs-mas { padding: 0 1.2rem; } .rs-fotos { grid-template-columns: repeat(3, 1fr); } }