/* ========================================================================== Adami Viajes — hoja de estilos del tema ========================================================================== */ :root { --navy: var( --wp--preset--color--navy, #0F3550 ); --navy-dark: var( --wp--preset--color--navy-dark, #0B2436 ); --teal: var( --wp--preset--color--teal, #00A89E ); --teal-dark: var( --wp--preset--color--teal-dark, #00847C ); --accent: var( --wp--preset--color--accent, #E4714E ); /* Color de TODO lo que indica oferta/descuento (cinta -X% OFF, burbuja "Oferta", borde de la tarjeta e interruptor): frambuesa (elegido por Nico, 2026-10-07; el naranja daba impresión de "cuidado/peligro"). Un solo lugar para cambiarlo. */ --oferta: #C2307A; --oferta-rgb: 194,48,122; --oferta-hover: #A82769; --neutral: var( --wp--preset--color--neutral, #F4F7F8 ); --text: var( --wp--preset--color--text, #16323F ); --text-muted: var( --wp--preset--color--text-muted, #5B7480 ); --white: #ffffff; --font-heading: var( --wp--preset--font-family--heading, 'Fraunces', serif ); --font-body: var( --wp--preset--font-family--body, 'Work Sans', sans-serif ); } /* -- Base -- */ * { box-sizing: border-box; } body { color: var(--text); } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; } .container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 24px; } .section { padding-block: 88px; } @media (max-width: 780px) { .section { padding-block: 48px; } .container { padding-inline: 20px; } } /* Portada: menos aire entre el botón "Ver todos los paquetes" y la franja azul que sigue. */ #paquetes.section { padding-bottom: 52px; } @media (max-width: 780px) { #paquetes.section { padding-bottom: 32px; } } .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--teal); flex-shrink: 0; } /* -- Botones -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: 15px; border: none; cursor: pointer; font-family: var(--font-body); line-height: 1; transition: background 0.15s ease, opacity 0.15s ease; } .btn-primary { background: var(--teal); color: #fff; box-shadow: 0 14px 28px -10px rgba(0,168,158,0.55); } .btn-primary:hover { background: var(--teal-dark); color: #fff; } .btn-outline-navy { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); } .btn-outline-navy:hover { background: var(--navy); color: #fff; } .btn-glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.45); color: #fff; backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255,255,255,0.16); color: #fff; } .btn-block { width: 100%; } /* -- Chips / pills / íconos de inclusión -- */ .chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; } .incchip { display: inline-flex; align-items: center; gap: 5px; background: rgba(0,168,158,0.12); color: var(--teal-dark); border-radius: 999px; padding: 4px 10px 4px 8px; font-size: 11.5px; font-weight: 600; line-height: 1; white-space: nowrap; } .incchip svg { display: block; flex-shrink: 0; } .incchip-row { display: flex; flex-wrap: wrap; gap: 5px; } /* -- Header -- */ .site-header { position: relative; z-index: 20; width: 100%; box-sizing: border-box; padding: 26px 0; } .site-header .container { display: flex; align-items: center; justify-content: space-between; } .site-header--solid { background: var(--navy); border-bottom: 3px solid var(--teal); } .site-logo img { height: 52px; width: auto; display: block; } @media (max-width: 480px) { .site-logo img { height: 42px; } } .site-nav { display: flex; align-items: center; gap: 34px; } .site-nav ul { list-style: none; display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; } .site-nav a { color: rgba(255,255,255,0.92); font-size: 14px; font-weight: 500; } .site-nav a:hover { color: #5FD9CE; } /* Teléfono del menú: recuadro con borde verde agua. Escritorio = texto; celular/tablet táctil = enlace a WhatsApp. */ .nav-tel { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(95,217,206,0.55); padding: 7px 13px; border-radius: 6px; color: rgba(255,255,255,0.92); font-size: 14px; font-weight: 500; white-space: nowrap; } .nav-tel svg { flex: none; color: #5FD9CE; } .nav-tel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .site-nav a.nav-tel:hover { border-color: #5FD9CE; color: #fff; } .nav-tel--link { display: none; } @media (max-width: 900px), (hover: none) and (pointer: coarse) { .nav-tel--texto { display: none; } .nav-tel--link { display: inline-flex; } } .nav-toggle { display: none; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle svg { stroke: #fff; } @media (max-width: 900px) { .nav-toggle { display: flex; } .site-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-dark); flex-direction: column; align-items: stretch; padding: 12px 20px 24px; gap: 0; display: none; } .site-nav.is-open { display: flex; } .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; } .site-nav ul li { border-top: 1px solid rgba(255,255,255,0.08); } .site-nav a { display: block; padding: 14px 4px; } .site-nav a.nav-tel { display: inline-flex; align-self: flex-start; margin-top: 16px; padding: 9px 13px; } .site-nav .btn { margin-top: 14px; align-self: center; width: auto; } } /* -- Hero -- */ .hero { position: relative; width: 100%; min-height: 640px; background: var(--navy-dark); overflow: hidden; display: flex; flex-direction: column; } .hero-bg { position: absolute; inset: 0; background: #123049; display: flex; align-items: center; justify-content: center; color: #3E6376; font-size: 13px; overflow: hidden; } .hero-bg-slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1.8s ease; filter: saturate(1.08) contrast(1.03); } .hero-bg-slide.is-active { opacity: 1; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,28,42,0.93) 0%, rgba(8,28,42,0.74) 40%, rgba(8,28,42,0.3) 74%, rgba(8,28,42,0.1) 100%); } .hero-deco { position: absolute; right: -40px; top: 30px; width: 620px; height: 520px; opacity: 0.45; pointer-events: none; } .hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; flex-grow: 1; } .hero-content { flex-grow: 1; display: flex; align-items: center; padding-block: 24px 56px; } .hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 600px; } .hero-slogan { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; opacity: 0.85; margin-bottom: -14px; } .hero-copy h1 { font-size: 52px; line-height: 1.06; font-weight: 600; color: #fff; margin: 0; } .hero-copy p { font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,0.85); max-width: 480px; margin: 0; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } @media (max-width: 780px) { .hero { min-height: 0; } .hero-copy h1 { font-size: 32px; } .hero-copy p { font-size: 15px; } .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } } /* -- Transición tipo "ola" entre el hero y el resto de la página -- */ .hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 100px; z-index: 1; pointer-events: none; } .hero-wave__fill { fill: #ffffff; } .hero-wave__line { stroke: rgba(95,217,206,0.85); stroke-width: 3; stroke-linecap: round; } @media (max-width: 780px) { .hero-wave { height: 56px; } } #paquetes { padding-top: 4px; } /* -- Paquetes: grilla de destacados / listado -- */ .pkg-grid-small { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } @media (max-width: 1024px) { .pkg-grid-small { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 780px) { /* En celular se ven sólo 6 de los 8 destacados (ya vienen en orden aleatorio desde `adami_get_featured_packages()`), en 2 columnas en vez de 1 — ver pedido explícito, 2026-09-30. */ .pkg-grid-small { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .pkg-grid-small > .pkg-card:nth-child(n+7) { display: none; } /* La cinta diagonal, la píldora y la estrella de "oferta" estaban pensadas para tarjetas de ~300px+ — a la mitad de ancho (~160px en un iPhone chico) la cinta ya cubría toda la tarjeta y se comía la píldora de al lado. Todo achicado en proporción a cómo se achicó la tarjeta. */ .pkg-grid-small .pkg-card__ribbon { width: 100px; left: -21px; top: 11px; font-size: 8px; padding: 4px 0; } .pkg-grid-small .pkg-card--cinta { --corte: 18px; } .pkg-grid-small .pkg-card__ribbon + .pkg-card__ribbon { top: 33px; } .pkg-grid-small .pkg-card__badges { top: 8px; right: 8px; gap: 5px; } .pkg-grid-small .pkg-card__promo { font-size: 9.5px; padding: 4px 9px; } .pkg-grid-small .pkg-card__oferta-star { width: 44px; height: 44px; } .pkg-grid-small .pkg-card__oferta-star-label { font-size: 6.5px; } .pkg-grid-small .pkg-card__badges .pkg-card__oferta-star { width: 60px; height: 60px; } .pkg-grid-small .pkg-card__badges .pkg-card__oferta-star-label { font-size: 9px; } } .pkg-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,53,80,0.06), 0 20px 40px -16px rgba(15,53,80,0.18); border: 1px solid #EAF0F1; position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } /* Paquetes con cinta "-X% OFF" o burbuja "Oferta": borde frambuesa (el mismo --oferta de la cinta y la burbuja) para que destaquen en el listado (1px de borde + 1px de anillo = 2px visibles, sin mover el contenido). */ .pkg-card--resalta { border-color: var(--oferta); /* anillo del color de oferta + la MISMA sombra gris que tienen todas las tarjetas (sin halo de color) */ box-shadow: 0 0 0 1px var(--oferta), 0 1px 2px rgba(15,53,80,0.06), 0 20px 40px -16px rgba(15,53,80,0.18); } .pkg-card:hover { color: inherit; } /* Tarjetas con cinta "-X% OFF": la esquina superior izquierda deja de ser redondeada y pasa a ser un corte recto en diagonal (paralelo a la cinta), con una línea frambuesa que une el borde de arriba con el de la izquierda. El espacio del corte queda vacío, sin fondo (se probó rellenarlo de verde/azul y no quedó bien) y en él va el texto "SALE", afuera de la diagonal. Cómo está armado: la tarjeta pasa a ser transparente y sin overflow (así el texto puede quedar en el hueco y apenas sobresalir de la caja); la foto y el cuerpo se recortan/redondean por su cuenta; el contorno frambuesa lo dibuja ::before (con el corte) y la diagonal ::after. --corte = cuánto mide cada cateto del corte (la diagonal mide --corte x 1,4142). */ .pkg-card--cinta { --corte: 30px; overflow: visible; background: transparent; border-color: transparent; border-top-left-radius: 0; box-shadow: 0 1px 2px rgba(15,53,80,0.06), 0 20px 40px -16px rgba(15,53,80,0.18); /* sin el anillo: lo dibuja ::before */ } .pkg-card--cinta .pkg-card__img { border-radius: 0 19px 0 0; clip-path: polygon(calc(var(--corte) - 2px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--corte) - 2px)); } .pkg-card--cinta .pkg-card__body { background: #fff; border-radius: 0 0 19px 19px; } /* contorno frambuesa (el mismo grosor de antes: 1px de borde + 1px de anillo), cortado en la diagonal */ .pkg-card--cinta::before { content: ""; position: absolute; inset: -2px; border: 2px solid var(--oferta); border-radius: 0 21px 21px 21px; z-index: 4; pointer-events: none; clip-path: polygon(calc(var(--corte) + 2px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--corte) + 2px)); } /* línea diagonal de ~2px que une los dos bordes (x + y = --corte, medido desde el vértice de la tarjeta) */ .pkg-card--cinta::after { content: ""; position: absolute; left: -1px; top: -1px; width: calc(var(--corte) + 6px); height: calc(var(--corte) + 6px); z-index: 4; pointer-events: none; background: linear-gradient(135deg, transparent 0, transparent calc(var(--corte) * 0.7071), var(--oferta) calc(var(--corte) * 0.7071), var(--oferta) calc((var(--corte) + 3px) * 0.7071), transparent calc((var(--corte) + 3px) * 0.7071)); } /* "SALE" afuera de la diagonal, pegado a ella y con el MISMO largo (--corte x 1,4142): un SVG con textLength ajusta las letras a ese largo exacto, así que queda angosto y alto. Gira -45° (se lee de abajo a la izquierda hacia arriba a la derecha, como la cinta). Sus extremos sobresalen unos píxeles de la caja de la tarjeta; está pensado así. */ .pkg-card__sale { display: none; } .pkg-card--cinta .pkg-card__sale { display: block; position: absolute; z-index: 5; pointer-events: none; width: calc(var(--corte) * 1.4142); height: calc(var(--corte) * 0.44); left: calc(var(--corte) * -0.386 - 1px); top: calc(var(--corte) * 0.101 - 1px); transform: rotate(-45deg); transform-origin: center; overflow: visible; } .pkg-card__sale text { font-family: var(--font-body); font-weight: 800; font-size: 46px; fill: var(--oferta); } /* Efecto: CADA 3 SEGUNDOS (pedido de Nico) las letras dan un saltito una a una, como una ola corta, y vuelven a quedarse quietas. Sin cartel intermitente ni giros continuos. Las tarjetas arrancan desfasadas (--sale-off) para que no salten todas a la vez. Sin movimiento si el visitante pidió reducir animaciones. Las unidades del salto son las del dibujo (el SVG mide 100 de ancho). */ .pkg-card--cinta { --sale-off: 0s; } .pkg-card--cinta:nth-child(3n+2) { --sale-off: 1s; } .pkg-card--cinta:nth-child(3n) { --sale-off: 2s; } .pkg-card__sale text { animation: sale-salto 3s infinite; animation-delay: var(--sale-off); } .pkg-card__sale text:nth-of-type(2) { animation-delay: calc(var(--sale-off) + 0.12s); } .pkg-card__sale text:nth-of-type(3) { animation-delay: calc(var(--sale-off) + 0.24s); } .pkg-card__sale text:nth-of-type(4) { animation-delay: calc(var(--sale-off) + 0.36s); } @keyframes sale-salto { /* un salto dura ~0,6 s de los 3 s del ciclo */ 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.7,.4,1); } 7% { transform: translateY(-16px); animation-timing-function: cubic-bezier(.6,0,.8,.4); } 14% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.7,.4,1); } 17.5% { transform: translateY(-3px); animation-timing-function: ease-in; } 21%, 100% { transform: translateY(0); } } /* Texto de la cinta ("-X% OFF"): un "latido" suave (zoom in y zoom out) CADA 3,5 SEGUNDOS (pedido de Nico). Está desfasado 1,75 s del "SALE" (que salta cada 3 s; como 3 y 3,5 no son múltiplos, de vez en cuando coinciden: es inevitable con estos ritmos). Sólo se agranda el texto, no la cinta. */ .pkg-card__ribbon-txt { position: relative; display: inline-block; } .pkg-card--cinta .pkg-card__ribbon-txt { animation: cinta-pulso 3.5s infinite; animation-delay: calc(var(--sale-off) + 1.75s); } @keyframes cinta-pulso { 0% { transform: scale(1); animation-timing-function: ease-out; } 7% { transform: scale(1.16); animation-timing-function: ease-in-out; } 16% { transform: scale(1); } 100% { transform: scale(1); } } /* Entrada: al aparecer la tarjeta en pantalla un avioncito cruza la cinta de punta a punta y va "escribiendo" el texto del descuento detrás. UNA SOLA pasada por cada carga de la tarjeta (pedido de Nico; se probaron pasadas repetidas cada 7/8 s, incluso con una vuelta alrededor del texto, y se descartaron). El JS (assets/js/cinta.js) agrega .vuela cuando la tarjeta se ve. Mientras tanto el texto queda oculto sólo si el navegador tiene scripts activos (@media scripting); como red de seguridad, si por algún motivo el JS no corre, a los 6 s el texto aparece solo. El avión y el texto se mueven con el mismo tiempo lineal: el borde de lo escrito sigue siempre al avión. */ .pkg-card__avion { display: none; } @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .pkg-card--cinta .pkg-card__ribbon-t { display: inline-block; clip-path: inset(-30% 100% -30% 0); animation: cinta-seguro 0.01s 6s forwards; } .pkg-card--cinta .pkg-card__avion { display: block; position: absolute; left: -30%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; color: #fff; opacity: 0; pointer-events: none; transform: rotate(45deg); /* el avión apunta hacia el largo de la cinta (el dibujo apunta arriba a la derecha) */ filter: drop-shadow(0 1px 1px rgba(9, 28, 42, 0.35)); } .pkg-card--cinta .pkg-card__avion svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke-width: 1.2; } .pkg-card--cinta.vuela .pkg-card__ribbon-t { animation: cinta-escribe 1.7s linear 0.25s both; } .pkg-card--cinta.vuela .pkg-card__avion { animation: cinta-avion 1.7s linear 0.25s both; } /* una sola pasada por carga de la tarjeta */ } @keyframes cinta-seguro { to { clip-path: inset(-30% 0 -30% 0); } } @keyframes cinta-escribe { /* el avión está en el texto entre el 19 % y el 81 % del recorrido */ 0%, 19% { clip-path: inset(-30% 100% -30% 0); } 81%, 100% { clip-path: inset(-30% 0 -30% 0); } } @keyframes cinta-avion { 0% { left: -30%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 130%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pkg-card__sale text, .pkg-card--cinta .pkg-card__ribbon-txt { animation: none; } } .pkg-card__img { position: relative; width: 100%; height: 190px; background: var(--teal); background-position: center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); font-size: 11.5px; flex-shrink: 0; } /* Imagen por defecto cuando un paquete no tiene ninguna foto (ni siquiera del hotel) — logo de la marca sobre verde agua, mismo tratamiento que el favicon (decisión de Nico, 2026-09-28, entre 4 opciones mostradas). */ .pkg-placeholder-logo { width: 42%; max-width: 160px; opacity: 0.95; } .pkg-card-hero__banner .pkg-placeholder-logo { max-width: 210px; } .pkg-card__badges { /* A la derecha a propósito: la cinta de "Oferta"/"X% OFF" (ver más abajo) siempre vive en la esquina superior IZQUIERDA — así nunca se pisan, estén las dos presentes a la vez o no. */ position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .pkg-card__promo { background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em; padding: 6.5px 15px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,0.65); } /* "Oferta" / "X% OFF" — cinta diagonal de esquina, a propósito bien distinta de la píldora navy de arriba (otra forma, otro color) para que se note al toque que hay una rebaja. El wrap cubre todo el contenedor de la foto (`inset:0`) para poder clipear la cinta en la esquina con el mismo `border-radius`/`overflow:hidden` que ya tiene ese contenedor — en `.pkg-card-hero__banner`, que tiene padding propio, el wrap se agranda con valores negativos exactamente iguales a ese padding para llegar hasta el borde visual real (si ese padding cambia, este valor hay que ajustarlo junto). */ .pkg-card__ribbon-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } .pkg-card-hero__banner .pkg-card__ribbon-wrap { top: -20px; right: -26px; bottom: -20px; left: -26px; } .pkg-card__ribbon { position: absolute; top: 18px; left: -34px; width: 160px; transform: rotate(-45deg); background: var(--oferta); color: #fff; text-align: center; padding: 6px 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(9,28,42,0.3); } .pkg-card__ribbon + .pkg-card__ribbon { top: 58px; } /* En la ficha (foto grande) la cinta de 160px se veía desproporcionadamente chica frente al resto — la agrandamos sólo ahí. El wrap ya se agranda de sobra (ver arriba) como para contener esta versión más grande sin que se corte contra el borde redondeado real de `.pkg-card-hero`. */ .pkg-card-hero__banner .pkg-card__ribbon { width: 270px; top: 30px; left: -78px; padding: 14px 0; font-size: 14px; line-height: 1; } .pkg-card-hero__banner .pkg-card__ribbon + .pkg-card__ribbon { top: 78px; } /* Con varias fotos aparecen flechas de navegación ancladas en las mismas esquinas (arriba izq./der., `top:16px`) que la cinta y las píldoras — se pisaban. Los tags/bandas quedan siempre en su lugar de siempre; lo que se baja son las flechas, para que pasen por debajo de ellos (pedido explícito de Nico, 2026-09-30). */ .pkg-card-hero__banner--has-arrows .pkg-gallery__arrow { top: 170px; } /* "Oferta" — estrella dorada propia, en la tarjeta chica siempre abajo a la izquierda de la foto (ahí el título va debajo, en el cuerpo, así que no hay riesgo de que se superpongan). En la ficha completa (single-paquete), en cambio, el título se apoya sobre la propia foto — así que ahí la estrella se suma directamente a la columna de píldoras arriba a la derecha (ver `.pkg-card__badges` en el markup de single-paquete.php) en vez de usar este wrap, para no competir nunca con el título. */ .pkg-card__oferta-wrap { position: absolute; bottom: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 8px; } .pkg-card__oferta-star { position: relative; display: block; width: 64px; height: 64px; filter: drop-shadow(0 3px 6px rgba(9,28,42,0.3)); } /* Pedido explícito de Nico, 2026-09-30: fondo verde agua corporativo, borde blanco que sigue el contorno de la estrella (stroke sobre el propio polygon, no un halo aparte) y texto navy — sólo para este badge, no para el resto. */ .pkg-card__oferta-star svg { width: 100%; height: 100%; fill: var(--oferta); stroke: #fff; stroke-width: 3; stroke-linejoin: round; } .pkg-card__oferta-star-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; padding: 0 8px; text-transform: uppercase; } /* En la ficha (single-paquete) la estrella vive en la columna de píldoras — ahí la agrandamos bastante más que el default (pedido explícito de Nico, 2026-09-30) porque a 56px quedaba chica al lado del resto. En la tarjeta chica del listado (`.pkg-card__oferta-wrap`, no `.pkg-card__badges`) sigue con el tamaño original. */ .pkg-card__badges .pkg-card__oferta-star { width: 96px; height: 96px; } .pkg-card__badges .pkg-card__oferta-star-label { font-size: 15px; } .pkg-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; } .pkg-card__body h3 { font-size: 17px; font-weight: 600; color: var(--text); margin: 0; font-family: var(--font-heading); } .pkg-card__price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 6px; } .pkg-card__price { display: flex; flex-direction: column; } .pkg-card__price small { font-size: 11px; color: var(--text-muted); } .pkg-card__price strong { font-size: 18px; font-weight: 700; color: var(--navy); } .pkg-card__price-old { font-size: 12px; color: var(--text-muted); text-decoration: line-through; } .pkg-card__link { font-weight: 600; font-size: 13px; color: var(--teal); } /* -- Listado de paquetes (archivo + filtros) -- */ .pkg-page-header { background: #fff; border-bottom: 1px solid #EAF0F1; padding-block: 40px 28px; } .pkg-breadcrumb { font-size: 13px; color: var(--text-muted); } .pkg-breadcrumb a { color: var(--text-muted); } .pkg-back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--navy); background: transparent; border: none; padding: 0; margin: 28px 0 16px; } .pkg-back-link:hover { color: var(--teal); } .pkg-page-header h1 { font-size: 30px; margin: 6px 0; } .pkg-count { font-size: 14.5px; color: var(--text-muted); } .pkg-count strong { color: var(--navy); } /* Cabecera con buscador a la derecha */ .pkg-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .pkg-search { position: relative; flex: 0 1 380px; min-width: 260px; } .pkg-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pkg-search__box { position: relative; } .pkg-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--teal); display: flex; pointer-events: none; } .pkg-search input[type="search"] { width: 100%; font-family: var(--font-body); font-size: 14.5px; color: var(--text); border: 1.5px solid #DCE6E8; border-radius: 999px; padding: 12px 16px 12px 40px; background: #fff; } .pkg-search input[type="search"]:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,158,0.15); } .pkg-search__list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #DCE6E8; border-radius: 16px; box-shadow: 0 14px 34px -8px rgba(9,28,42,0.25); max-height: 380px; overflow-y: auto; } .pkg-search__list[hidden] { display: none; } .pkg-search__group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 8px 10px 4px; } .pkg-search__item { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .pkg-search__item:hover, .pkg-search__item.is-active { background: rgba(0,168,158,0.1); } .pkg-search__item-text { font-size: 14px; font-weight: 600; color: var(--navy); } .pkg-search__item-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 780px) { .pkg-header-row { flex-direction: column; align-items: stretch; gap: 16px; } .pkg-search { flex: 1 1 auto; min-width: 0; } } /* Resumen de filtros aplicados (arriba de los resultados). */ .pkg-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 22px; font-size: 14px; color: var(--text-muted); } .pkg-summary__text strong { color: var(--navy); } .pkg-summary__chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,168,158,0.1); color: var(--navy); border: 1px solid rgba(0,168,158,0.35); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 600; } .pkg-summary__chip:hover { background: rgba(0,168,158,0.18); color: var(--navy); } .pkg-summary__clear { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: underline; } .pkg-summary__clear:hover { color: var(--teal); } /* El resumen de filtros aplicados vive DENTRO de la barra de filtros, así queda pegado con ella al hacer scroll. */ .pkg-filters .pkg-summary { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EAF0F1; } .pkg-filters.is-stuck .pkg-summary { border-top-color: rgba(0,168,158,0.22); } .pkg-filters.is-stuck .pkg-summary__chip { background: #fff; } .pkg-filters.is-stuck .pkg-summary__chip:hover { background: #F2FAF9; } /* Compacta: se oculta el formulario pero siguen visibles los filtros aplicados (si los hay). */ .pkg-filters.is-collapsed.has-summary { padding-block: 10px; background: #EAF5F4; border-bottom: 1px solid rgba(0,168,158,0.28); box-shadow: 0 8px 18px -12px rgba(15,53,80,0.35); } .pkg-filters.is-collapsed.has-summary > .container { display: block; } .pkg-filters.is-collapsed.has-summary form, .pkg-filters.is-collapsed.has-summary .pkg-filters-toggle { display: none; } .pkg-filters.is-collapsed.has-summary .pkg-summary { margin-top: 0; padding-top: 0; border-top: 0; } .pkg-filters.is-collapsed.has-summary .pkg-filters-collapse { top: 100%; } .pkg-filters { background: #fff; border-bottom: 1px solid #EAF0F1; padding-block: 20px; position: sticky; top: 0; z-index: 10; transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; } /* Sólo mientras la barra está "pegada" arriba (la clase la pone filtros-paquetes.js al hacer scroll): fondo verde-agua muy claro + sombra suave, para que se note que el panel de filtros sigue ahí. */ .pkg-filters.is-stuck { background: #EAF5F4; border-bottom-color: rgba(0,168,158,0.28); box-shadow: 0 8px 18px -12px rgba(15,53,80,0.35); } /* Pestaña "Ocultar filtros" colgada del borde inferior derecho de la barra (la crea filtros-paquetes.js; sólo desktop y sólo mientras la barra está pegada). Al tocarla la barra se compacta y queda sólo la pestaña "Mostrar filtros", así los paquetes se ven a pantalla completa. */ .pkg-filters-collapse { display: none; position: absolute; right: max(24px, calc((100% - 1180px) / 2 + 24px)); top: 100%; align-items: center; gap: 6px; padding: 5px 12px 6px; font: 600 12.5px/1.2 var(--font-body); color: var(--teal-dark); background: #EAF5F4; border: 1px solid rgba(0,168,158,0.28); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 8px 14px -10px rgba(15,53,80,0.35); cursor: pointer; } .pkg-filters-collapse:hover { background: #DDF0EE; color: var(--navy); } .pkg-filters-collapse:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .pkg-filters-collapse svg { flex-shrink: 0; transition: transform .2s ease; } .pkg-filters.is-stuck .pkg-filters-collapse, .pkg-filters.is-collapsed .pkg-filters-collapse { display: inline-flex; } /* Compacta: la barra pasa a altura 0 y sólo queda la pestaña (ahora "Mostrar filtros") pegada arriba a la derecha. */ .pkg-filters.is-collapsed { padding-block: 0; border-bottom: 0; background: transparent; box-shadow: none; } .pkg-filters.is-collapsed > .container { display: none; } .pkg-filters.is-collapsed .pkg-filters-collapse { top: 0; } .pkg-filters.is-collapsed .pkg-filters-collapse svg { transform: rotate(180deg); } @media (max-width: 780px) { .pkg-filters.is-stuck .pkg-filters-collapse { display: none; } /* Mobile: el resumen pegado ocupa una sola línea (sin el texto largo), con los chips deslizables de costado. */ .pkg-filters .pkg-summary { margin-top: 10px; padding-top: 10px; } .pkg-filters.is-stuck .pkg-summary { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pkg-filters.is-stuck .pkg-summary::-webkit-scrollbar { display: none; } .pkg-filters.is-stuck .pkg-summary__text { display: none; } .pkg-filters.is-stuck .pkg-summary__chip, .pkg-filters.is-stuck .pkg-summary__clear { flex-shrink: 0; white-space: nowrap; } } .pkg-filters-sentinel { height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } .pkg-filters-toggle { display: none; align-items: center; gap: 8px; width: 100%; background: none; border: 1px solid #DCE6E8; border-radius: 10px; padding: 11px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; } .pkg-filters-toggle svg:first-child { color: var(--teal); flex-shrink: 0; } .pkg-filters-toggle span { flex-grow: 1; text-align: left; } .pkg-filters-toggle svg:last-child { flex-shrink: 0; transition: transform 0.2s ease; } .pkg-filters-toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); } .pkg-filters form { display: flex; align-items: flex-start; gap: 14px 22px; flex-wrap: wrap; padding-bottom: 2px; } .pkg-field { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; } .pkg-field label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .pkg-field select, .pkg-field input { font-family: var(--font-body); font-size: 13px; color: var(--text); border: 1px solid #DCE6E8; border-radius: 10px; padding: 9px 10px; background: #fff; min-width: 92px; } .pkg-field select:focus, .pkg-field input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,168,158,0.15); } .pkg-field--precio { flex-shrink: 0; } .pkg-field--precio input[type="range"] { -webkit-appearance: none; appearance: none; width: 130px; height: 4px; border-radius: 999px; background: #DCE6E8; min-width: 0; padding: 0; /* margen superior mayor para que la barra quede centrada con los selects vecinos */ margin: 16px 0 2px; border: none; } .pkg-field--precio input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,53,80,0.35); cursor: pointer; } .pkg-field--precio input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--teal); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(15,53,80,0.35); cursor: pointer; } .pkg-field--precio input[type="range"]:focus { outline: none; } .pkg-field--precio input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0,168,158,0.25); } .pkg-price-values { display: flex; gap: 10px; min-height: 14px; } /* Interruptor "Mostrar solo ofertas" (frambuesa: el mismo color de la cinta y el borde de las ofertas). */ .pkg-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 36px; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; } .pkg-field .pkg-switch { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; } .pkg-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; } .pkg-switch__track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #D5E0E3; transition: background .18s ease; flex-shrink: 0; } .pkg-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,53,80,.3); transition: transform .18s ease; } .pkg-switch input:checked + .pkg-switch__track { background: var(--oferta); } .pkg-switch input:checked + .pkg-switch__track::after { transform: translateX(18px); } .pkg-switch input:focus-visible + .pkg-switch__track { box-shadow: 0 0 0 3px rgba(var(--oferta-rgb),.28); } .pkg-switch:hover .pkg-switch__track { background: #C4D3D7; } .pkg-switch:hover input:checked + .pkg-switch__track { background: var(--oferta-hover); } .pkg-price-value { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } /* 23px = alto de una etiqueta de campo (17.59px) + el gap de 5px hasta su control — así "Buscar"/"Borrar filtros" quedan a la misma altura que los inputs/selects de los demás campos, sin depender de cuánto contenido tenga cada campo por debajo (equivalente/valores, etc.). */ .pkg-filters .btn { padding: 9px 18px; font-size: 13px; flex-shrink: 0; white-space: nowrap; margin-top: 0; box-shadow: none; } .pkg-clear-filters { font-size: 12.5px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; margin-top: 0; padding-top: 10px; } .pkg-clear-filters:hover { color: var(--teal); } /* Barra en dos filas FIJAS (no depende de cuántos filtros haya activos ni del ancho de cada campo): fila 1 = campos + "Ordenar por" al borde derecho; fila 2 = interruptor de ofertas + Buscar + Borrar filtros. El espaciador es el salto de línea entre ambas (el margen negativo compensa el gap extra que suma). */ .pkg-filters-spacer { display: block; order: 2; flex-basis: 100%; height: 0; margin-top: -14px; } .pkg-field--orden { margin-left: auto; order: 1; } .pkg-filters .btn { order: 4; } .pkg-clear-filters { order: 5; } /* "Ordenar por" destacado con un fondo turquesa muy suave (sin llegar a ser llamativo); los márgenes negativos compensan el relleno para no alterar la altura/alineación de la fila de filtros. */ .pkg-field--orden { background: rgba(0,168,158,0.09); border: 1px solid rgba(0,168,158,0.28); border-radius: 14px; padding: 8px 12px 10px; margin-top: -9px; margin-bottom: -10px; } .pkg-field--orden label { color: var(--teal-dark); } .pkg-field--orden select { border-color: rgba(0,168,158,0.4); font-weight: 600; } /* El interruptor de ofertas va en su propia fila, abajo (sin etiqueta: el texto del interruptor alcanza). */ .pkg-field--ofertas { order: 3; margin-top: 3px; } .pkg-field--ofertas > label:first-child { display: none; } .pkg-field--ofertas .pkg-switch { height: 30px; } /* Ancho intermedio (tablet / desktop angosto): la fila 1 sólo tiene lugar para los cuatro campos, así que "Ordenar por" pasa a la fila 2 (al borde derecho) en formato compacto: etiqueta al lado del desplegable. */ @media (min-width: 781px) and (max-width: 1100px) { .pkg-field--orden { order: 6; margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px; } .pkg-field--ofertas { margin-top: 8px; } .pkg-filters .btn, .pkg-clear-filters { margin-top: 7px; } } @media (max-width: 780px) { /* Colapsados por default: sólo se ve el botón "Filtros" hasta que se toca — antes ocupaban toda la franja de arriba (sticky) y tapaban los resultados apenas se entraba a la página. */ .pkg-filters-toggle { display: flex; } .pkg-filters form { display: none; flex-direction: column; align-items: stretch; overflow-x: visible; margin-top: 16px; } .pkg-filters form.is-open { display: flex; } .pkg-field select, .pkg-field input { width: 100%; } .pkg-field--precio input[type="range"] { width: 100%; } .pkg-filters-spacer { display: none; } .pkg-filters .btn, .pkg-clear-filters { order: 0; } .pkg-field--orden { margin: 0; order: 0; } .pkg-field--ofertas { order: 0; flex-basis: auto; margin-top: 0; } .pkg-field--ofertas > label:first-child { display: block; } .pkg-field--ofertas .pkg-switch { height: 36px; } .pkg-filters .btn { margin-top: 0; } .pkg-clear-filters { margin-top: 0; padding-top: 0; text-align: center; } } /* Espaciador invisible (lo maneja filtros-paquetes.js): ocupa, debajo de la barra, la diferencia de altura entre la barra en su lugar y la barra pegada compacta, así el contenido no se corre al pegarse/despegarse. */ .pkg-filters-gap { height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; } /* MODO CAPA FLOTANTE (lo activa filtros-paquetes.js con is-fixable): la barra en su lugar es normal (relative) y, al scrollear, pasa a fixed arriba de todo. El espaciador de arriba retiene su lugar en la página, así lo que le pase a la barra flotante (compactarse, ocultarse) no mueve nada del contenido. */ .pkg-filters.is-fixable { position: relative; } .pkg-filters.is-fixable.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: 50; animation: pkg-flota-entra .14s ease-out; } .admin-bar .pkg-filters.is-fixable.is-stuck { top: 32px; } @media (max-width: 782px) { .admin-bar .pkg-filters.is-fixable.is-stuck { top: 46px; } } /* Mobile: con el formulario abierto la barra flotante puede ser alta; que se pueda deslizar adentro. */ @media (max-width: 780px) { .pkg-filters.is-fixable.is-stuck { max-height: 100vh; overflow-y: auto; } .admin-bar .pkg-filters.is-fixable.is-stuck { max-height: calc(100vh - 46px); } } @keyframes pkg-flota-entra { from { transform: translateY(-10px); opacity: .4; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pkg-filters.is-fixable.is-stuck { animation: none; } } /* BARRA PEGADA COMPACTA: mientras acompaña al scroll ocupa menos pantalla (menos aire entre objetos, tipografía y controles un poco más chicos). Con la barra en su lugar, arriba de la página, todo queda con el tamaño normal. */ .pkg-filters.is-stuck:not(.is-collapsed) { padding-block: 8px; } .pkg-filters.is-stuck form { gap: 6px 16px; padding-bottom: 0; } .pkg-filters.is-stuck .pkg-filters-spacer { margin-top: -6px; } .pkg-filters.is-stuck .pkg-field { gap: 2px; } .pkg-filters.is-stuck .pkg-field label { font-size: 9.5px; } .pkg-filters.is-stuck .pkg-field select, .pkg-filters.is-stuck .pkg-field input:not([type="range"]):not([type="checkbox"]) { font-size: 12px; padding: 5px 9px; border-radius: 8px; min-width: 84px; } .pkg-filters.is-stuck .pkg-field--precio input[type="range"] { width: 116px; margin: 10px 0 1px; } .pkg-filters.is-stuck .pkg-price-values { min-height: 12px; gap: 8px; } .pkg-filters.is-stuck .pkg-price-value { font-size: 10px; } .pkg-filters.is-stuck .pkg-field--ofertas { margin-top: 2px; } .pkg-filters.is-stuck .pkg-field--ofertas .pkg-switch { height: 24px; } .pkg-filters.is-stuck .pkg-field .pkg-switch { font-size: 12px; } .pkg-filters.is-stuck .btn { margin-top: 0; padding: 5px 14px; font-size: 12px; } .pkg-filters.is-stuck .pkg-clear-filters { margin-top: 0; padding-top: 6px; font-size: 12px; } .pkg-filters.is-stuck .pkg-summary { margin-top: 6px; padding-top: 6px; gap: 6px 8px; font-size: 12.5px; } .pkg-filters.is-stuck .pkg-summary__chip { padding: 3px 10px; font-size: 12px; } .pkg-filters.is-stuck .pkg-summary__clear { font-size: 12px; } @media (min-width: 1101px) { /* alineado por arriba con las etiquetas de los demás campos (mismo aire que el resto de la barra); el margen inferior negativo evita que agrande la fila (a su izquierda, en la fila de abajo, no hay nada que pise). */ .pkg-filters.is-stuck .pkg-field--orden { padding: 4px 9px 5px; margin-top: 0; margin-bottom: -11px; border-radius: 11px; } } @media (min-width: 781px) and (max-width: 1100px) { .pkg-filters.is-stuck .pkg-field--orden { padding: 3px 10px; gap: 8px; } .pkg-filters.is-stuck .pkg-field--orden label { font-size: 9.5px; } } @media (max-width: 780px) { .pkg-filters.is-stuck .pkg-filters-toggle { padding: 7px 12px; font-size: 13px; } .pkg-filters.is-stuck form.is-open { margin-top: 10px; } .pkg-filters.is-stuck .pkg-summary { margin-top: 6px; padding-top: 6px; } } .pkg-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; padding-block: 40px 24px; } @media (max-width: 1024px) { .pkg-results-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 780px) { .pkg-results-grid { grid-template-columns: 1fr; } } .pkg-empty { padding: 60px 0; text-align: center; color: var(--text-muted); } .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; padding-block: 12px 64px; } .page-numbers { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border: 1px solid #DCE6E8; background: #fff; color: var(--text); } .page-numbers.current { background: var(--teal); border-color: var(--teal); color: #fff; } .page-numbers.dots { border: none; } /* -- Ficha de paquete individual -- */ .pkg-card-hero { border: 1px solid #E2EAEC; border-radius: 24px; overflow: hidden; margin-bottom: 40px; } .pkg-card-hero__layout { display: grid; grid-template-columns: 1.7fr 1fr; align-items: stretch; } .pkg-card-hero__main { padding: 36px 38px; background: #fff; } .pkg-card-hero__banner { position: relative; /* Altura pensada para llegar aprox. hasta la línea divisoria del panel de precio (debajo de "Nos vamos a poner en contacto...") — pedido explícito de Nico, 2026-09-28: con la altura chica de antes no se notaba bien que había una foto real de fondo. */ min-height: 326px; display: flex; align-items: flex-end; overflow: hidden; margin: -36px -38px 28px; padding: 20px 26px; background: var(--teal); border-radius: 24px 0 0 0; } .pkg-gallery__slide--placeholder { display: flex; align-items: center; justify-content: center; background: var(--teal); } .pkg-card-hero__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,28,42,0.92) 0%, rgba(9,28,42,0.55) 45%, rgba(9,28,42,0.05) 80%); pointer-events: none; } .pkg-card-hero__banner h1 { position: relative; z-index: 2; color: #fff; font-size: 26px; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.35); } .pkg-single-content { font-size: 16px; line-height: 1.75; color: var(--text); } .pkg-single-content > *:first-child { margin-top: 0; } .pkg-single-disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); margin: 22px 0 0; padding-top: 16px; border-top: 1px solid #E2EAEC; } /* -- Galería de fotos de la ficha de paquete -- */ .pkg-gallery__slide { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 0.6s ease; } .pkg-gallery__slide.is-active { opacity: 1; } .pkg-gallery__arrow { /* Ancladas arriba (no centradas verticalmente): con títulos largos de 2-3 líneas el h1 se apoya abajo del banner y una flecha centrada terminaba tapada por el texto. */ position: absolute; top: 16px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; border: none; background: rgba(9,28,42,0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease; } .pkg-gallery__arrow:hover { background: var(--teal); } .pkg-gallery__arrow--prev { left: 14px; } .pkg-gallery__arrow--next { right: 14px; } .pkg-gallery__dots { position: absolute; z-index: 3; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .pkg-gallery__dot { width: 7px; height: 7px; border-radius: 999px; border: none; background: rgba(255,255,255,0.5); padding: 0; cursor: pointer; } .pkg-gallery__dot.is-active { background: #fff; width: 18px; border-radius: 4px; transition: width 0.2s ease; } /* -- Secciones de detalle (hotel / vuelo / cancelación) en la ficha de paquete -- */ .pkg-detail-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid #E2EAEC; } .pkg-detail-section h2 { font-size: 18px; margin: 0 0 10px; color: var(--navy); } /* Info del destino: va al final, en su propio recuadro con color suave de marca — se distingue a propósito del resto (que es todo dato del paquete en sí: salidas, hotel, vuelo, cancelación) porque es información general del lugar, no del producto puntual. */ .pkg-detail-section--destino { position: relative; border-top: none; background: rgba(0,168,158,0.07); border: 1px solid rgba(0,168,158,0.16); border-radius: 16px; padding: 22px 24px; } /* Grid item aparte (hermano de .pkg-card-hero__main / __panel, no adentro de ninguno de los dos) — así el auto-placement de CSS Grid lo manda a una fila propia abajo de los dos en desktop, y en mobile (1 columna) cae después del panel de precio, que es justo el orden pedido en los dos casos sin necesitar reglas de mobile aparte. */ /* A todo el ancho del box de producto (spanea las 2 columnas) — a esa altura la columna de precio ya no tiene contenido, así que aprovecha el espacio; mantiene el mismo margen/padding lateral que tenía antes (38px). */ .pkg-card-hero__destino-wrap { grid-column: 1 / -1; padding: 0 38px 36px; } /* "Quizás te puede interesar" — box propio y separado, al final de toda la página (mismo tratamiento de borde/radio que .pkg-card-hero, pero independiente de esa tarjeta). A todo el ancho del container, así que la grilla de 3 usa el mismo patrón que el listado de paquetes. */ .pkg-relacionados { border: 1px solid #E2EAEC; border-radius: 24px; padding: 32px 38px; margin: 0 0 64px; background: #fff; } .pkg-relacionados h2 { font-size: 20px; margin: 0 0 20px; color: var(--navy); } /* "Mientras tanto..." (después de enviar el formulario de contacto) — mismo contenido que "Quizás te puede interesar" pero sin box propio y a todo el ancho de página normal (se incluye fuera del container angosto del formulario, ver page-contacto.php / page-faq.php). */ .pkg-sugeridos { margin: 40px 0 64px; } .pkg-sugeridos h2 { font-size: 22px; margin: 0 0 22px; color: var(--navy); text-align: center; } .pkg-relacionados-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } @media (max-width: 900px) { .pkg-relacionados-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 560px) { .pkg-relacionados-grid { grid-template-columns: 1fr; } .pkg-relacionados { padding: 26px 24px; } } .pkg-detail-hotel__name { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 4px; } .pkg-detail-subtitle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.03em; margin: 14px 0 4px; } .pkg-detail-subtitle svg { color: var(--teal-dark); flex-shrink: 0; } .pkg-detail-desc:first-of-type { margin-top: 0; } .pkg-detail-stars { color: #E0A23B; font-size: 13px; margin-left: 4px; letter-spacing: 1px; } .pkg-detail-meta { font-size: 13.5px; color: var(--text-muted); margin: 0 0 10px; } .pkg-detail-desc { font-size: 14.5px; line-height: 1.7; color: var(--text); margin: 10px 0 0; } .pkg-detail-section .incchip-row { margin-top: 8px; } /* Acordeón de destinos (paquetes multi-destino, ej. un tour por Europa) — mismo cuadro/color que el de un solo destino, cada ítem es un desplegable exclusivo (abrir uno cierra el resto). Truco de "grid-template-rows: 0fr → 1fr" para la animación de apertura, sin medir alturas por JS. */ .pkg-destino-accordion h2 { margin-bottom: 6px; } .pkg-destino-accordion__item + .pkg-destino-accordion__item { border-top: 1px solid rgba(0,168,158,0.18); } .pkg-destino-accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: none; border: none; padding: 14px 0; margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--navy); text-align: left; cursor: pointer; } .pkg-destino-accordion__chevron { flex-shrink: 0; color: var(--teal-dark); transition: transform 0.2s ease; } .pkg-destino-accordion__item.is-open .pkg-destino-accordion__chevron { transform: rotate(180deg); } .pkg-destino-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .pkg-destino-accordion__item.is-open .pkg-destino-accordion__panel { grid-template-rows: 1fr; } .pkg-destino-accordion__panel-inner { overflow: hidden; min-height: 0; } .pkg-destino-accordion__item.is-open .pkg-destino-accordion__panel-inner { padding-bottom: 18px; } .pkg-flight-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .pkg-flight-row + .pkg-flight-row { border-top: 1px dashed #E2EAEC; } .pkg-flight-row__logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .pkg-flight-row__body { display: flex; flex-direction: column; gap: 2px; } .pkg-flight-row__body strong { font-size: 14px; color: var(--navy); } .pkg-flight-row__meta { font-size: 13px; color: var(--text-muted); } .pkg-card-hero__panel { background: var(--neutral); border-left: 1px solid #E2EAEC; border-bottom-left-radius: 16px; padding: 36px 26px 28px; display: flex; flex-direction: column; gap: 16px; justify-content: flex-start; } .pkg-card-hero__panel .price { font-size: 13px; color: var(--text-muted); } .pkg-card-hero__panel .price strong { display: block; font-size: 28px; color: var(--navy); font-family: var(--font-heading); } .pkg-card-hero__panel .price .price__old { display: block; font-size: 15px; text-decoration: line-through; color: var(--text-muted); margin-top: 2px; } .pkg-share { border-top: 1px solid #E2EAEC; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .pkg-share__label { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .pkg-share__row { display: flex; gap: 8px; } .pkg-share__btn { position: relative; width: 38px; height: 38px; border-radius: 999px; background: #fff; border: 1px solid #E2EAEC; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pkg-share__btn:hover { background: var(--teal); border-color: var(--teal); color: #fff; } .pkg-share__btn.is-copied { background: var(--teal); border-color: var(--teal); color: #fff; } .pkg-share__btn::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 160px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; padding: 6px 10px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5; } .pkg-share__btn::before { content: ''; position: absolute; bottom: 100%; left: 50%; border: 5px solid transparent; border-top-color: var(--navy); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5; } .pkg-share__btn:hover::after, .pkg-share__btn:hover::before, .pkg-share__btn:focus-visible::after, .pkg-share__btn:focus-visible::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } @media (max-width: 900px) { .pkg-card-hero__layout { grid-template-columns: 1fr; } .pkg-card-hero__panel { border-left: none; border-top: 1px solid #E2EAEC; border-bottom-left-radius: 0; } .pkg-card-hero__main { padding: 28px 24px; } .pkg-card-hero__banner { margin: -28px -24px 24px; border-radius: 24px 24px 0 0; } .pkg-card-hero__destino-wrap { padding: 0 24px 28px; margin-top: 24px; } } /* -- Proceso "Así viajás con Adami Viajes" -- */ .process { position: relative; background: var(--navy); overflow: hidden; } /* Foto de fondo de globos aerostáticos, fija (no rotativa). Un degradé del mismo azul de la sección va ENCIMA de la foto: opaco a la izquierda (oculta la imagen del todo, ahí vive el texto de `.process-head`) y se va transparentando hacia la derecha para dejarla entrever, siempre tenue (la opacidad del azul nunca baja de ~0.72) para que el texto blanco siga leyéndose perfecto en toda la sección. `background-position` apunta al globo grande de la foto (aprox. 60%/25% del original) para que sea lo que quede en primer plano recortado por `cover`, en cualquier pantalla. */ .process::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(to right, var(--navy) 0%, var(--navy) 34%, rgba(15,53,80,0.85) 62%, rgba(15,53,80,0.72) 100%), url('../img/process-globos.jpg'); background-size: cover, cover; background-position: center, 60% 25%; background-repeat: no-repeat, no-repeat; } .process-deco { position: absolute; right: -100px; bottom: -100px; width: 460px; height: 460px; opacity: 0.5; pointer-events: none; z-index: 1; } .process > .container { position: relative; z-index: 2; } .process-head { max-width: 620px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; } .process-head h2 { color: #fff; font-size: 34px; margin: 0; } .process-head p { color: #C7D5DA; font-size: 16px; line-height: 1.7; margin: 0; } .process-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; } /* La línea va del centro del círculo 1 al centro del círculo 3 (22px = radio), así siempre toca los círculos sin importar el ancho de la pantalla — con un porcentaje fijo quedaba despegada del "1" en pantallas anchas. El ancho de una columna es (100% - 2 gaps de 32px) / 3. */ .process-steps::before { content: ""; position: absolute; top: 22px; left: 22px; width: calc(2 * (100% - 64px) / 3 + 64px); height: 1px; background: rgba(0,168,158,0.35); } .process-step { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; } .step-num { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 18px; font-weight: 600; flex-shrink: 0; } .process-step h3 { color: #fff; font-size: 19px; margin: 0; } .process-step p { color: #B7CBD3; font-size: 14.5px; line-height: 1.6; margin: 0; } .process-more { color: #5FD9CE; font-weight: 600; font-size: 15px; margin-top: 40px; display: inline-block; } @media (max-width: 780px) { .process-steps { grid-template-columns: 1fr; gap: 28px; } .process-steps::before { display: none; } } /* -- CTA band -- */ .cta-band { position: relative; background: var(--teal); padding-block: 64px; overflow: hidden; } /* Ola de transición sólo contra la sección de ABAJO (`.site-footer`, fondo `var(--navy-dark)`) — el mismo color exacto de esa sección, para que no quede ningún hueco entre módulos. Arriba NO lleva ola (2026-09-30, pedido explícito: el borde de arriba, contra `.process`, queda recto). Si el fondo de `.site-footer` cambia alguna vez, este fill tiene que cambiar junto. */ .cta-band__wave { position: absolute; left: 0; width: 100%; height: 44px; display: block; } .cta-band__wave--bottom { bottom: 0; } .cta-band__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band__text { max-width: none; } /* Globo terráqueo decorativo, anclado al módulo (no al contenedor centrado, para que la posición no dependa del ancho del contenedor), con un margen respecto al borde izquierdo para que quede más cerca del texto, y centrado verticalmente con un pequeño corrimiento hacia arriba como margen de aire respecto a la ola de abajo. Imagen completa, sin recortar. */ .cta-band__globe { position: absolute; left: 24px; top: 46%; transform: translateY(-50%); width: 140px; height: 140px; pointer-events: none; z-index: 1; } .cta-band__divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.35); flex-shrink: 0; } .cta-band h2 { color: #fff; font-size: 28px; margin: 0 0 8px; } .cta-band p { color: rgba(255,255,255,0.92); font-size: 16px; margin: 0; } .cta-band .btn { background: var(--navy); color: #fff; flex-shrink: 0; } .cta-band .btn:hover { background: var(--navy-dark); } /* Pedido explícito, 2026-09-30: el párrafo tiene que entrar siempre en una sola línea — sobraba espacio hasta el divisor. `nowrap` sólo por encima del breakpoint mobile (781px+, donde vive el layout en fila); si alguna vez no entra igual, `flex-wrap` en `.cta-band__inner` ya baja el botón a una fila propia en vez de cortar o superponer el texto. */ @media (min-width: 781px) { .cta-band p { white-space: nowrap; } } @media (max-width: 780px) { .cta-band__divider { display: none; } .cta-band__inner .btn { margin: 0 auto; } /* En celular el texto ocupa todo el ancho y el globo de 140px lo pisaba: se achica y se acomoda en la fila del botón (a su izquierda, donde sobra lugar), alineado con el centro del botón. */ .cta-band__globe { top: auto; bottom: 64px; transform: none; left: 12px; width: 44px; height: 44px; } } /* -- Footer -- */ .site-footer { position: relative; background: var(--navy-dark); overflow: hidden; padding-block: 56px 28px; } .site-footer .container { position: relative; z-index: 2; } .footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 32px; margin-bottom: 40px; } .footer-col h4 { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.04em; margin: 0 0 12px; text-transform: uppercase; } .footer-col p { font-size: 13px; color: #8FA9B3; line-height: 1.6; } .footer-slogan { font-weight: 700; color: #fff; margin-bottom: 6px; font-size: 11px; } /* En desktop el slogan no puede ser más ancho que el logo (117.6px medidos a 64px de alto) — se achica hasta entrar en una sola línea en ese ancho. */ @media (min-width: 781px) { .footer-col p.footer-slogan { white-space: nowrap; max-width: 118px; overflow: hidden; font-size: 8.2px; letter-spacing: 0.01em; } } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a { color: #A9C0C9; font-size: 14px; } .footer-col a:hover { color: #fff; } /* Íconos de redes — a propósito con `currentColor` (nunca el rosa/celeste propio de cada red) para que sigan siempre los colores de la marca, igual que el resto de los links del footer. */ .footer-social-link { display: inline-flex; align-items: center; gap: 8px; } .footer-social-link svg { flex-shrink: 0; } .footer-logo img { height: 46px; width: auto; margin-bottom: 14px; } /* En desktop el logo se agranda un poco (con el slogan abajo, ocupa un espacio más parecido al título + lista de las otras columnas) y arranca alineado arriba, igual que el título/label del resto de las columnas — nunca centrado, para que todo el footer quede a la misma altura. */ @media (min-width: 781px) { .footer-logo img { height: 64px; margin-bottom: 14px; } } /* QR para agendar el contacto (vCard) — reemplaza al slogan/descripción. Tarjeta blanca porque el QR necesita fondo claro para escanear bien; el borde teal es lo que lo integra a la paleta de la marca sobre el footer oscuro. */ .footer-qr { margin-bottom: 14px; } .footer-qr__label { display: block; font-size: 14px; font-weight: 400; color: #A9C0C9; margin-bottom: 10px; } .footer-qr__img { display: block; width: 112px; height: 112px; padding: 10px; background: #fff; border-radius: 12px; border: 2px solid var(--teal); } /* En desktop el QR quedaba sobresaliendo por debajo del último link de las columnas de al lado ("Blog") — lo achicamos (y el padding blanco en la misma proporción) hasta que termine a esa misma altura (medido). */ @media (min-width: 781px) { .footer-qr__img { width: 97px; height: 97px; padding: 8px; } } .footer-bottom { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 12px; color: #6E8B9A; } .footer-bottom__link { color: #6E8B9A; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; } .footer-bottom__link:hover { color: #fff; } .footer-bottom__divider { width: 1px; height: 12px; background: rgba(255,255,255,0.18); } @media (max-width: 480px) { .footer-bottom__divider { display: none; } } @media (max-width: 780px) { /* Sitio / Ayuda / Seguinos van primero, las tres en una fila; el logo y el QR pasan al final, cada uno ocupando el ancho completo. Todo centrado. */ .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 16px; text-align: center; } .footer-grid > .footer-col--logo { order: 2; grid-column: 1 / -1; margin-top: 8px; } .footer-grid > .footer-col--qr { order: 3; grid-column: 1 / -1; margin-top: 8px; } .footer-grid > .footer-col:not(.footer-col--logo):not(.footer-col--qr) { order: 1; } .footer-col ul { align-items: center; } .footer-qr { display: flex; flex-direction: column; align-items: center; } /* `text-align:center` no alcanza para centrar el logo: el reset global pone todo `img` en `display:block`, así que termina ocupando todo el ancho de la columna igual (el `` que lo envuelve se "contagia" de ese `display:block`) — se centra como cualquier bloque, con margin auto. */ .footer-logo img { margin-left: auto; margin-right: auto; } } /* -- Contenido genérico (páginas, blog) -- */ .page-hero { background: var(--neutral); padding-block: 56px 40px; border-bottom: 1px solid #E2EAEC; } .page-hero h1 { color: var(--navy); font-size: 34px; margin: 0; } .content-area { padding-block: 56px; } .content-area .entry-content { max-width: 760px; margin-inline: auto; font-size: 16.5px; line-height: 1.75; } .content-area .entry-content h2 { font-size: 26px; margin-top: 2em; } .content-area .entry-content h3 { font-size: 20px; } /* Preguntas frecuentes: bloque nativo "Detalles" de Gutenberg, restyleado como acordeón de tarjetas (nada de JS — es el
/ del navegador, editable desde el admin como contenido normal de la página). */ .faq-content h2 { font-size: 21px; margin: 2.2em 0 0.9em; color: var(--navy); } .faq-content h2:first-child { margin-top: 0; } .faq-content .wp-block-details { background: #fff; border: 1px solid #EAF0F1; border-radius: 14px; padding: 2px 22px; margin: 0 0 12px; } .faq-content .wp-block-details summary { list-style: none; cursor: pointer; position: relative; padding: 17px 30px 17px 0; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--navy); } .faq-content .wp-block-details summary::-webkit-details-marker { display: none; } .faq-content .wp-block-details summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease; } .faq-content .wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq-content .wp-block-details p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; line-height: 1.7; } .faq-content .wp-block-details p:last-child { margin-bottom: 18px; } .faq-cta { text-align: center; margin-top: 56px; padding-top: 48px; border-top: 1px solid #EAF0F1; } .faq-cta h2 { font-size: 24px; color: var(--navy); margin: 0 0 6px; } .faq-cta > p { color: var(--text-muted); margin: 0 0 28px; } .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; } @media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 780px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #EAF0F1; box-shadow: 0 16px 32px -18px rgba(15,53,80,0.2); text-decoration: none; color: inherit; } .blog-card img { height: 190px; width: 100%; object-fit: cover; } .blog-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; } .blog-card__body h3 { font-size: 18px; margin: 0; color: var(--text); } .blog-card__body p { font-size: 14px; color: var(--text-muted); margin: 0; } /* -- Cotizador (wizard) -- */ .wizard { display: flex; flex-direction: column; gap: 28px; } .wizard__progress { height: 4px; background: #EAF0F1; border-radius: 999px; overflow: hidden; } .wizard__progress-bar { height: 100%; width: 20%; background: var(--teal); border-radius: 999px; transition: width 0.35s ease; } .wizard__step { display: flex; flex-direction: column; gap: 20px; } .wizard__step[hidden] { display: none; } .wizard__question { font-size: 24px; font-weight: 600; color: var(--navy); margin: 0; font-family: var(--font-heading); } .wizard__hint { font-size: 14px; color: var(--text-muted); margin: -12px 0 0; } .wizard__date-msg { font-size: 14px; line-height: 1.45; margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid; } .wizard__date-msg[hidden] { display: none; } .wizard__date-msg--error { background: #FCEEEC; border-color: #E4714E; color: #8a3a20; } .wizard__date-msg--warn { background: #FFF6E0; border-color: #E8B94A; color: #7a5a10; } .wizard__options { display: flex; flex-direction: column; gap: 10px; } .wizard__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border: 1.5px solid #E2EAEC; border-radius: 14px; background: #fff; font-size: 15.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; font-family: var(--font-body); transition: border-color 0.15s ease, background 0.15s ease; } .wizard__option:hover { border-color: var(--teal); background: rgba(0,168,158,0.05); } .wizard__option.is-open { border-color: var(--teal); background: rgba(0,168,158,0.05); } .wizard__field select { font-family: var(--font-body); font-size: 15px; color: var(--text); background: #fff; border: 1.5px solid #E2EAEC; border-radius: 12px; padding: 13px 15px; } .wizard__field select:focus { outline: none; border-color: var(--teal); } .wizard__option::after { content: "\2192"; color: var(--teal); font-weight: 700; opacity: 0; transition: opacity 0.15s ease; } .wizard__option:hover::after { opacity: 1; } .wizard__field { display: flex; flex-direction: column; gap: 6px; } .wizard__field label { font-size: 13px; font-weight: 600; color: var(--text-muted); } .wizard__field input, .wizard__field textarea { font-family: var(--font-body); font-size: 15px; color: var(--text); border: 1.5px solid #E2EAEC; border-radius: 12px; padding: 13px 15px; } .wizard__field input:focus, .wizard__field textarea:focus { outline: none; border-color: var(--teal); } .wizard__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .wizard__back { background: none; border: none; color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .wizard__back:hover { color: var(--navy); } .wizard__suggestions { display: flex; flex-direction: column; gap: 14px; } .wizard__sugg-card { display: flex; align-items: center; gap: 16px; border: 1.5px solid #E2EAEC; border-radius: 16px; padding: 12px; background: #fff; } .wizard__sugg-card > img { width: 84px; height: 64px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: linear-gradient(160deg,#123049,#00847C); } /* Sin foto: logo blanco sobre verde agua (misma imagen por defecto que las tarjetas del listado). */ .wizard__sugg-thumb { width: 84px; height: 64px; border-radius: 10px; flex-shrink: 0; background: var(--teal); display: flex; align-items: center; justify-content: center; } .wizard__sugg-thumb img { width: 62%; max-width: 120px; height: auto; opacity: 0.95; } .wizard__sugg-info { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; } .wizard__sugg-info strong { font-size: 15px; color: var(--navy); } .wizard__sugg-info span { font-size: 13px; color: var(--text-muted); } .wizard__sugg-pick { flex-shrink: 0; background: var(--teal); color: #fff; border: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font-body); } .wizard__sugg-pick:hover { background: var(--teal-dark); } .wizard__none-btn { align-self: flex-start; background: none; border: none; color: var(--text-muted); text-decoration: underline; font-size: 14px; cursor: pointer; font-family: var(--font-body); padding: 4px 0; } .wizard__checklist { display: flex; flex-direction: column; gap: 10px; } .wizard__check-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1.5px solid #E2EAEC; border-radius: 14px; background: #fff; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer; font-family: var(--font-body); transition: border-color 0.15s ease, background 0.15s ease; } .wizard__check-row:hover { border-color: var(--teal); background: rgba(0,168,158,0.05); } .wizard__check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; } /* Última fila de una lista de checks: no es un tilde sino una acción directa ("No tengo preferencia" = Continuar sin considerar nada de esa pregunta) — mismo look que las filas de arriba, pero es un