/* DCG · portada.
   Escenario: patrón «Hero Carousel» de @crafterui (21st.dev) llevado a CSS y JS sin librerías: una tira de fotos que
   comparten el borde de arriba, la elegida se despliega al doble de alto y el fondo cambia a esa foto. Titular de dos
   tamaños («CONECTAMOS» enorme y «cada parte de tu viaje» con la etiqueta azul) y el RNT como sello de pasaporte
   («Stamp» de @designali-in, 21st.dev). Viajes: abanico inspirado en «Image Fan Carousel» de @ayushmxxn (21st.dev).
   Descuento: medidor de aguja inspirado en «Gauge» de @designali-in (21st.dev).
   Contraste (WCAG AA) medido píxel por píxel sobre las 6 fotos a 375, 768, 1024 y 1440: velo, sombra detrás del texto
   y del nombre del destino, y fondo marino en el botón de línea. */

/* ---------- Escenario ---------- */

.escenario{position:relative;display:grid;min-height:100svh;background:var(--marino-noche);color:var(--crema);overflow:clip;isolation:isolate}
.escenario__fondos{position:absolute;inset:0;z-index:-2}
.escenario__fondo{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--suave)}
.escenario__fondo.es-activo{opacity:1}
.escenario__fondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.escenario__fondo.es-activo img{animation:acerca 9s linear both}
.escenario.es-quieto .escenario__fondo img{animation-play-state:paused}
@keyframes acerca{from{transform:scale(1.14)}to{transform:scale(1.02)}}
/* Arriba, oscuro hasta debajo del menú (sus enlaces van sobre la foto); a la izquierda, detrás del texto. */
.escenario__velo{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgb(13 30 59 / .84) 0,rgb(13 30 59 / .7) 9%,rgb(13 30 59 / .14) 21%,transparent 45%,rgb(13 30 59 / .55) 100%),
    linear-gradient(90deg,rgb(13 30 59 / .8) 0,rgb(13 30 59 / .45) 36%,rgb(13 30 59 / 0) 64%)}

.escenario__dentro{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:end;gap:clamp(28px,4vw,48px);width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin:0 auto;padding:108px var(--margen) clamp(28px,4vw,52px)}

/* El RNT como sello de pasaporte: lleva a «Quién está detrás». */
.estampa{justify-self:end;display:block;margin-bottom:-12px;padding:4px;border:2px solid var(--crema);border-radius:14px;background:rgb(13 30 59 / .62);color:var(--crema);text-decoration:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -20px rgb(0 0 0 / .7);transform:rotate(-6deg);transition:transform .45s var(--rebote),border-color .3s}
.estampa__marco{display:grid;justify-items:center;gap:3px;padding:8px 16px 9px;border:1.5px dashed rgb(242 237 232 / .75);border-radius:10px;line-height:1;text-transform:uppercase;text-align:center}
.estampa__arriba,.estampa__abajo{font-size:.72rem;font-weight:800;letter-spacing:.14em}
.estampa__rnt{font-size:1.75rem;font-weight:900;letter-spacing:.12em;color:var(--cielo)}
.estampa__numero{font-size:.98rem;font-weight:800;letter-spacing:.05em;text-transform:none}
.estampa:hover{transform:rotate(-1deg) scale(1.05);border-color:var(--cielo)}
.js .estampa{opacity:0}
.listo .estampa{opacity:1;animation:sella .75s var(--rebote) .65s backwards}
@keyframes sella{from{opacity:0;transform:rotate(-16deg) scale(1.8)}to{opacity:1;transform:rotate(-6deg) scale(1)}}

/* Sombra detrás del texto: en celular, una franja de orilla a orilla; en computadora, una nube a la izquierda. */
.escenario__texto{position:relative;container-type:inline-size}
.escenario__texto::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-48px calc(-1 * var(--margen)) -16px;
  background:linear-gradient(180deg,rgb(13 30 59 / 0),rgb(13 30 59 / .5) 48px,rgb(13 30 59 / .5) calc(100% - 16px),rgb(13 30 59 / .3))}

.titular{text-transform:uppercase;text-shadow:0 2px 26px rgb(13 30 59 / .45)}
.titular__grande,.titular__pie{display:block;overflow:hidden}
.titular__grande > span,.titular__pie > span{display:inline-block}
/* «CONECTAMOS» llena el ancho del bloque de texto (unidades del contenedor; con vw si el navegador no las tiene). */
.titular__grande{padding-bottom:.03em;font:900 clamp(2.4rem,12.4vw,5.2rem)/.86 var(--letra);font-size:clamp(2.4rem,14.3cqi,7.6rem);letter-spacing:-.035em}
.titular__pie{margin-top:.28em;padding:.1em 0 .16em;font:700 clamp(1.4rem,6.6vw,2.3rem)/1.1 var(--letra);font-size:clamp(1.4rem,6.9cqi,3rem);letter-spacing:-.01em;text-transform:none}
.titular em{display:inline-block;margin-left:.05em;padding:.02em .32em .08em;border-radius:10px;background:var(--cielo);color:var(--marino-noche);font-style:normal;font-weight:800;text-shadow:none;transform:rotate(-2.5deg);box-shadow:0 10px 24px -12px rgb(0 0 0 / .6)}
.js .titular__grande > span,.js .titular__pie > span{transform:translateY(112%);transition:transform 1s var(--suave)}
.js .titular__pie > span{transition-delay:.22s}
.listo .titular__grande > span,.listo .titular__pie > span{transform:none}
.js .titular em{clip-path:inset(0 100% 0 0)}
.listo .titular em{clip-path:inset(-20% -10%);transition:clip-path .7s var(--suave) .85s}

.escenario__entrada{max-width:34ch;margin-top:20px;font-size:var(--t-entrada);font-weight:500;color:var(--crema)}
.escenario__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.escenario .boton--linea{--b-fondo:rgb(13 30 59 / .6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:519px){
  .escenario__dentro{padding-top:96px}
  .escenario__acciones{flex-wrap:nowrap;margin-top:22px}
  .escenario__acciones .boton{flex:1 1 auto;justify-content:center;padding:.85em 1em;font-size:.9rem}
  .boton__largo{display:none}
  .escenario__entrada{margin-top:14px}
  .estampa__marco{padding:6px 12px 7px}
  .estampa__rnt{font-size:1.45rem}
  .estampa__numero{font-size:.88rem}
}
.js .escenario__texto > :not(.titular){opacity:0;transform:translateY(18px);transition:opacity .8s var(--suave),transform .9s var(--suave);transition-delay:calc(var(--i,0) * 110ms + 300ms)}
.listo .escenario__texto > :not(.titular){opacity:1;transform:none}

/* La tira de destinos */
.tira{--ancho:clamp(118px,33vw,176px);--alto:calc(var(--ancho) * 4 / 3);--medio:calc(var(--alto) * .5);--hueco:12px;--paso:calc(var(--ancho) + var(--hueco));
  position:relative;min-width:0;margin-right:calc(-1 * var(--margen))}
.tira__actual{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:2.2em;margin-bottom:14px;font-weight:800;text-transform:uppercase;isolation:isolate}
.tira__nombre{position:relative;font-size:clamp(1.75rem,1.1rem + 2.6vw,3.25rem);line-height:1;letter-spacing:-.01em;text-shadow:0 2px 12px rgb(13 30 59 / .6)}
/* Sombra difusa detrás del nombre grande (va sobre la foto sin velo, a la derecha). */
.tira__nombre::before{content:"";position:absolute;z-index:-1;inset:-.12em -.4em -.08em;border-radius:.5em;background:rgb(13 30 59 / .62);filter:blur(14px);pointer-events:none}
.tira__lugar{font-size:.9rem;font-weight:700;letter-spacing:.08em;color:var(--crema);overflow:hidden}
.tira__lugar > span{padding:3px 9px;border-radius:6px;background:rgb(13 30 59 / .72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tira__nombre > span,.tira__lugar > span{display:inline-block}
.tira__actual.cambia .tira__nombre > span{animation:sube .75s var(--suave) both}
.tira__actual.cambia .tira__lugar > span{animation:sube .75s var(--suave) .08s both}
@keyframes sube{from{transform:translateY(60%);opacity:0}to{transform:none;opacity:1}}

.tira__ventana{position:relative;height:var(--alto);overflow:hidden;touch-action:pan-y}
.tira__pista{position:relative;height:100%;margin:0;padding:0;list-style:none}
.tira__item{position:absolute;top:0;left:0;width:var(--ancho);height:var(--medio);transform:translateX(calc(var(--slot,0) * var(--paso)));
  transition:transform .95s var(--suave),height .8s var(--suave),opacity .6s var(--suave)}
.tira__item.es-activo{height:var(--alto)}
.tira__item.es-salida{opacity:0}
.tira__item.salta{transition:none}
.tarjeta-destino{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--marino);cursor:pointer;text-align:left;
  box-shadow:0 18px 40px -22px rgb(0 0 0 / .8);transition:box-shadow .4s,transform .4s var(--rebote)}
.tarjeta-destino:focus-visible{outline-offset:-4px}
.tarjeta-destino img{position:absolute;left:0;top:50%;width:100%;height:var(--alto);object-fit:cover;transform:translateY(-50%) scale(1.02);transition:transform .9s var(--suave),filter .5s}
.tira__item:not(.es-activo) .tarjeta-destino img{filter:saturate(.85) brightness(.82)}
.tira__item:not(.es-activo) .tarjeta-destino:hover{transform:translateY(4px)}
.tira__item:not(.es-activo) .tarjeta-destino:hover img{filter:none;transform:translateY(-50%) scale(1.08)}
.tarjeta-destino__rotulo{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;background:linear-gradient(rgb(13 30 59 / 0),rgb(13 30 59 / .62) 45%,rgb(13 30 59 / .92));font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--crema);line-height:1.15}
.tarjeta-destino__rotulo small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:none}
.tira__item:not(.es-activo) .tarjeta-destino__rotulo small{display:none}
/* La elegida ya tiene su nombre en grande arriba de la tira. */
.tarjeta-destino__rotulo{transition:opacity .5s}
.tira__item.es-activo .tarjeta-destino__rotulo{opacity:0}
.tira__item.es-activo .tarjeta-destino{box-shadow:0 0 0 3px var(--cielo),0 26px 50px -24px rgb(0 0 0 / .9)}

/* Barras de avance: las barras del logo, crecen de izquierda a derecha. */
.tira__barras{display:flex;align-items:flex-end;gap:7px;height:34px;margin-top:18px}
.tira__barras i{position:relative;width:22px;height:calc(10px + var(--n) * 4.5px);border-radius:3px;background:rgb(242 237 232 / .22);overflow:hidden}
.tira__barras i::after{content:"";position:absolute;inset:0;background:var(--cielo);transform:scaleY(0);transform-origin:bottom}
.tira__barras i.es-hecha::after,.tira__barras i.es-actual::after{transform:none}
.tira__barras i.es-hecha::after{background:var(--cielo-claro)}
.tira__barras i.es-corre::after{animation:llena var(--duracion,6.5s) linear both}
.escenario.es-quieto .tira__barras i.es-corre::after{animation-play-state:paused}
@keyframes llena{to{transform:none}}

@media (min-width:960px){
  .escenario__dentro{grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);align-items:end;padding-bottom:clamp(36px,5.5vh,72px)}
  .estampa{position:absolute;top:clamp(104px,15vh,160px);right:var(--margen);margin:0}
  .escenario__texto::before{inset:-14% -24% -12% calc(-1 * var(--margen) - 60px);
    background:radial-gradient(ellipse 62% 58% at 42% 55%,rgb(13 30 59 / .55),rgb(13 30 59 / .34) 58%,rgb(13 30 59 / 0))}
  .tira{--ancho:clamp(150px,12.4vw,204px);margin-bottom:6px}
}
@media (max-width:959px){
  .escenario__velo{background:
    linear-gradient(180deg,rgb(13 30 59 / .8) 0,rgb(13 30 59 / .32) 17%,rgb(13 30 59 / .4) 40%,rgb(13 30 59 / .6) 68%,rgb(13 30 59 / .88) 100%)}
}

/* ---------- Viajes: pestañas y abanico ---------- */

.viajes{position:relative;padding:clamp(72px,10vw,140px) var(--margen);background:var(--marino);color:var(--crema);overflow:clip}
.viajes::before{content:"";position:absolute;left:-12vw;top:-18vw;width:48vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgb(55 181 255 / .22),transparent 65%);pointer-events:none}
.viajes__dentro{position:relative;display:grid;gap:clamp(28px,4vw,48px);max-width:var(--ancho);margin:0 auto;align-items:center}
.viajes__titulo{font:800 var(--t-titulo)/1 var(--letra);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.viajes__entrada{max-width:40ch;margin-top:var(--e2);font-size:var(--t-entrada);color:rgb(242 237 232 / .88)}
.pestanas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pestana{--color:var(--cielo);display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 14px;border:2px solid rgb(242 237 232 / .28);border-radius:var(--r);background:transparent;
  font-weight:800;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;text-align:left;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .35s var(--rebote)}
.pestana::before{content:"";flex:none;width:12px;height:12px;border-radius:3px;background:var(--color);transition:transform .4s var(--rebote)}
.pestana:hover{border-color:var(--color);transform:translateY(-2px)}
.pestana[aria-selected="true"]{background:var(--color);border-color:var(--color);color:var(--marino-noche)}
.pestana[aria-selected="true"]::before{background:var(--marino-noche);transform:rotate(45deg) scale(.9)}
.pestana--cruceros,#panel-cruceros{--color:#FF7FA8}
.pestana--circuitos,#panel-circuitos{--color:var(--estrella)}
.pestana--luna,#panel-luna{--color:var(--cielo-claro)}
.panel{--color:var(--cielo);margin-top:var(--e3)}
.panel[hidden]{display:none}
.js .panel:not([hidden]){animation:entra .6s var(--suave) both}
@keyframes entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel__titulo{font:800 var(--t-rotulo)/1.1 var(--letra);text-transform:uppercase}
.panel p{max-width:46ch;margin-top:10px;color:rgb(242 237 232 / .9)}
/* Lo que armamos en cada tipo de viaje: palomitas del color de la pestaña, que entran una tras otra. */
.panel__incluye{display:grid;gap:10px;margin-top:var(--e2);padding:0;list-style:none}
.panel__incluye li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.02rem}
.panel__incluye li::before{content:"";flex:none;width:26px;height:26px;border-radius:8px;background:var(--color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='%230D1E3B' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;transform:rotate(-8deg)}
.js .panel:not([hidden]) .panel__incluye li{animation:entra .55s var(--suave) both}
.js .panel:not([hidden]) .panel__incluye li:nth-child(2){animation-delay:.09s}
.js .panel:not([hidden]) .panel__incluye li:nth-child(3){animation-delay:.18s}
.panel .boton{margin-top:var(--e3)}

.abanico{position:relative;width:min(100%,520px);aspect-ratio:1/1.02;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.abanico__carta{--x:0%;--y:0%;--giro:0deg;--esc:1;
  position:absolute;left:50%;top:50%;width:62%;aspect-ratio:3/4;margin:0;border-radius:var(--r-grande);overflow:hidden;background:var(--marino-hondo);cursor:pointer;
  border:6px solid var(--color,var(--crema));box-shadow:0 30px 60px -28px rgb(0 0 0 / .85);
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--giro)) scale(var(--esc));
  transition:transform .85s var(--rebote),filter .5s,border-color .4s}
.abanico__carta img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--suave)}
.abanico__carta:not(.es-frente){filter:saturate(.8) brightness(.72)}
.abanico__carta:not(.es-frente):hover{filter:saturate(1) brightness(.9)}
.abanico__carta.es-frente:hover img{transform:scale(1.05)}
.abanico__pie{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;background:linear-gradient(rgb(13 30 59 / 0),rgb(13 30 59 / .88));font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.abanico__pie small{display:block;font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:none;opacity:.88}
.abanico__carta--familia{--color:var(--cielo)}
.abanico__carta--cruceros{--color:#FF7FA8}
.abanico__carta--circuitos{--color:var(--estrella)}
.abanico__carta--luna{--color:var(--cielo-claro)}
.js .abanico:not(.visto) .abanico__carta{transform:translate(-50%,-30%) rotate(0deg) scale(.86);transition-delay:0s}
.js .abanico.visto .abanico__carta{transition-delay:calc(var(--orden,0) * 70ms)}
.abanico.arrastra .abanico__carta{transition-duration:.3s}

@media (min-width:960px){
  .viajes__dentro{grid-template-columns:1fr 1.05fr;grid-template-areas:"cabeza abanico" "control abanico";row-gap:var(--e4);align-items:start}
  .viajes__cabeza{grid-area:cabeza;align-self:end}
  .viajes__control{grid-area:control}
  .abanico{grid-area:abanico;align-self:center;width:min(100%,560px)}
}
@media (max-width:420px){
  .pestana{font-size:.9rem;letter-spacing:.02em;padding:10px 12px}
}

/* ---------- El descuento: medidor de aguja que se mueve con el tipo de reserva ---------- */

.descuento{position:relative;padding:clamp(72px,10vw,140px) var(--margen);overflow:clip}
.descuento__dentro{display:grid;gap:clamp(28px,4vw,48px);max-width:var(--ancho);margin:0 auto;align-items:center}
.descuento__titulo{font:800 clamp(2.1rem,1.2rem + 3vw,3.75rem)/1 var(--letra);letter-spacing:-.015em;text-transform:uppercase;color:var(--marino);text-wrap:balance}
.descuento__texto{max-width:38ch;margin-top:var(--e2);font-size:var(--t-entrada)}

.medidor{--valor:0;position:relative;margin:0;padding:clamp(22px,3vw,40px) clamp(18px,3vw,40px) clamp(24px,3vw,36px);border-radius:var(--r-grande);background:var(--blanco);box-shadow:var(--sombra);text-align:center;overflow:hidden}
.medidor::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-60%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgb(55 181 255 / .2),rgb(55 181 255 / 0));pointer-events:none}
.medidor__caja{position:relative;max-width:460px;margin:0 auto}
.medidor__dial{width:100%;height:auto;overflow:visible}
.medidor__pista,.medidor__lleno{fill:none}
.medidor__pista{stroke:var(--crema-honda);stroke-width:30;stroke-linecap:round}
.medidor__lleno{stroke:url(#medidor-color);stroke-width:30;stroke-linecap:round;stroke-dasharray:35 35;stroke-dashoffset:calc(35 - var(--valor));transition:stroke-dashoffset 1.1s var(--suave),opacity .3s}
.medidor[data-valor="0"] .medidor__lleno{opacity:0}
/* Escala de 0 a 35 %: las dos cifras son promedios (cerca de 20 y de 35), sin tope ni rango. */
.medidor__marcas line{stroke:var(--marino);stroke-width:3;stroke-linecap:round;opacity:.3}
.medidor__numeros text{font:800 16px var(--letra);fill:var(--marino)}
.medidor__aguja{transform-box:view-box;transform-origin:170px 170px;transform:rotate(calc(var(--valor) / 35 * 180deg - 90deg));transition:transform 1.2s var(--rebote)}
.medidor__aguja path{stroke:var(--marino);stroke-width:9;stroke-linecap:round}
.medidor__aguja circle{fill:var(--marino)}
.medidor__aguja .medidor__eje{fill:var(--cielo)}
.medidor__cifra{margin-top:-.05em;font:900 clamp(3.4rem,2rem + 6vw,6.2rem)/.9 var(--letra);letter-spacing:-.045em;color:var(--marino);white-space:nowrap}
.medidor__cifra em{font-style:normal;color:var(--bugambilia)}
.medidor__cifra span{display:inline-block}
.medidor.cambia .medidor__cifra span{animation:sube .55s var(--suave) both}
.medidor__dice{margin-top:10px;font-weight:800;font-size:1.1rem;color:var(--marino)}

.opciones{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.opciones__titulo{float:left;width:100%;margin-bottom:4px;padding:0;font:800 .85rem/1.3 var(--letra);letter-spacing:.12em;text-transform:uppercase;color:var(--marino)}
.opcion{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 18px;border:2px solid rgb(30 58 105 / .2);border-radius:var(--r);background:var(--blanco);cursor:pointer;
  transition:border-color .25s,background-color .25s,transform .35s var(--rebote)}
.opcion input{grid-row:1 / span 2;width:22px;height:22px;margin:0;accent-color:var(--bugambilia);cursor:pointer}
.opcion__nombre{font-weight:800;line-height:1.2;color:var(--marino)}
.opcion__dato{grid-column:2;font-size:.94rem;color:#475673}
.opcion:hover{transform:translateX(4px);border-color:var(--cielo)}
.opcion:has(input:checked){border-color:var(--marino);background:var(--marino)}
.opcion:has(input:checked) .opcion__nombre{color:var(--crema)}
.opcion:has(input:checked) .opcion__dato{color:var(--cielo-claro)}
.opcion:has(input:focus-visible){outline:3px solid var(--cielo);outline-offset:3px}
.opcion input:focus-visible{outline:none}
.descuento__aviso{max-width:46ch;margin-top:var(--e3);padding:16px 18px;border-left:6px solid var(--bugambilia);border-radius:0 var(--r) var(--r) 0;background:var(--blanco)}
.descuento__aviso b{display:block;font-size:1.15rem;color:var(--bugambilia-honda)}
.descuento .boton{margin-top:var(--e4)}
@media (min-width:960px){
  .descuento__dentro{grid-template-columns:1.05fr .95fr;grid-template-areas:"medidor cabeza" "medidor control";column-gap:clamp(48px,6vw,96px);row-gap:var(--e4);align-items:start}
  .medidor{grid-area:medidor;align-self:center}
  .descuento__cabeza{grid-area:cabeza;align-self:end}
  .descuento__control{grid-area:control}
}

/* ---------- Opiniones en Google ---------- */

.opiniones{position:relative;padding:clamp(72px,9vw,128px) var(--margen);background:var(--bugambilia);color:var(--blanco);overflow:clip}
.opiniones::after{content:"";position:absolute;right:-6vw;top:50%;width:min(46vw,620px);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:rgb(255 255 255 / .07);box-shadow:0 0 0 clamp(40px,6vw,90px) rgb(255 255 255 / .05)}
.opiniones__dentro{position:relative;z-index:1;display:grid;gap:var(--e5);max-width:var(--ancho);margin:0 auto;align-items:center}
.opiniones__titulo{font:800 var(--t-titulo)/.96 var(--letra);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.opiniones__texto{max-width:42ch;margin-top:var(--e2);font-size:var(--t-entrada)}
.opiniones__acciones{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:var(--e4)}
.nota-opinion{position:relative;max-width:460px;padding:clamp(26px,3vw,40px);border-radius:var(--r-grande);background:var(--blanco);color:var(--tinta);box-shadow:0 34px 60px -30px rgb(70 8 32 / .65);transform:rotate(-2.5deg);transition:transform .5s var(--rebote)}
.nota-opinion:hover{transform:rotate(0deg) translateY(-4px)}
.nota-opinion__comillas{width:60px;height:auto;margin-bottom:16px;fill:var(--bugambilia)}
.nota-opinion__titulo{font:800 var(--t-rotulo)/1.1 var(--letra);text-transform:uppercase;color:var(--marino)}
.nota-opinion p{max-width:34ch;margin-top:10px;font-size:1.05rem}
.nota-opinion .boton{margin-top:var(--e3)}
/* Reseñas de 5 estrellas de Google (24-oct): en celular, una fila que se desliza; en compu, 3 arriba y 2 abajo. */
.resenas{position:relative;z-index:1;display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,340px);gap:var(--e2);max-width:var(--ancho);margin:var(--e5) auto 0;padding:6px 2px 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.resenas::-webkit-scrollbar{display:none}
.resenas>li{scroll-snap-align:start;display:flex}
.resena{display:flex;flex-direction:column;gap:14px;width:100%;margin:0;padding:clamp(22px,2.4vw,30px);border-radius:var(--r-grande);background:var(--blanco);color:var(--tinta);box-shadow:0 26px 50px -30px rgb(70 8 32 / .7);transform:rotate(var(--giro,-1.2deg));transition:transform .5s var(--rebote)}
.resenas>li:nth-child(even) .resena{--giro:1.4deg}
.resena:hover{transform:rotate(0deg) translateY(-4px)}
.resena__estrellas{display:flex;gap:3px}
.resena__estrellas svg{width:18px;height:18px;fill:var(--estrella)}
.resena__texto{margin:0;font-size:1.0625rem;line-height:1.5}
.resena__texto p::before{content:"«"}
.resena__texto p::after{content:"»"}
.resena__autor{margin-top:auto;font-weight:700;color:var(--marino)}
.resena__autor span{display:block;margin-top:2px;font-weight:400;font-size:var(--t-chico);color:rgb(22 35 61 / .7)}
@media (min-width:900px){
  .opiniones__dentro{grid-template-columns:1.1fr .9fr}
  .nota-opinion{justify-self:end;margin-left:auto}
  .resenas{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);overflow:visible;padding:0}
  .resenas>li{grid-column:span 2}
  .resenas>li:nth-child(4),.resenas>li:nth-child(5){grid-column:span 3}
}
/* Garantía de mejor precio (descuento de la portada y de Nuestros viajes): tarjeta marino con el escudo como sello. */
.garantia{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;max-width:46ch;margin-top:var(--e3);padding:18px 20px 20px;border-radius:var(--r-grande);background:var(--marino);color:var(--crema);box-shadow:var(--sombra)}
.garantia__sello{width:52px;height:52px;rotate:-8deg;transition:rotate .5s var(--rebote)}
.garantia:hover .garantia__sello{rotate:0deg}
.garantia__escudo{fill:var(--cielo);stroke:var(--crema);stroke-width:2.5;stroke-linejoin:round}
.garantia__palomita{fill:none;stroke:var(--marino-noche);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.garantia__titulo{margin:0;font:800 1.2rem/1.1 var(--letra);letter-spacing:.03em;text-transform:uppercase;color:var(--cielo-claro)}
.garantia__texto p{margin:6px 0 0}
.garantia a{color:var(--cielo-claro);font-weight:700;text-underline-offset:.2em}
@media (prefers-reduced-motion:reduce){.resena,.resena:hover{transform:none}.garantia__sello{transition:none}}

/* ---------- Quién está detrás ---------- */

.quien{padding:clamp(72px,10vw,140px) var(--margen)}
.quien__dentro{display:grid;gap:clamp(40px,5vw,72px);max-width:var(--ancho);margin:0 auto;align-items:center}
.quien__titulo{font:800 var(--t-titulo)/1 var(--letra);letter-spacing:-.015em;text-transform:uppercase;color:var(--marino);text-wrap:balance}
.quien__texto p{max-width:44ch;margin-top:var(--e2);font-size:var(--t-entrada)}
.quien__texto .boton{margin-top:var(--e4)}

.boleto{display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r-grande);filter:drop-shadow(0 30px 40px rgb(13 30 59 / .28));transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--suave)}
.boleto.sigue{transition:transform .12s linear}
.boleto__cuerpo{position:relative;padding:clamp(22px,3vw,34px);border-radius:var(--r-grande) var(--r-grande) 0 0;background:var(--blanco);
  -webkit-mask:radial-gradient(circle 16px at 0 100%,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 16px at 100% 100%,#0000 98%,#000) right / 51% 100% no-repeat;
          mask:radial-gradient(circle 16px at 0 100%,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 16px at 100% 100%,#0000 98%,#000) right / 51% 100% no-repeat}
.boleto__cabeza{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:2px solid var(--crema)}
.boleto__cabeza img{width:112px}
.boleto__cabeza span{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marino)}
.boleto__datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:20px}
.boleto__datos div{min-width:0}
.boleto__datos .boleto__ancho{grid-column:1 / -1}
.boleto__datos dt{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5A6B86}
.boleto__datos dd{margin-top:3px;font-weight:700;font-size:1.05rem;color:var(--marino);overflow-wrap:anywhere}
.boleto__talon{position:relative;display:grid;gap:8px;padding:clamp(22px,3vw,30px);border-radius:0 0 var(--r-grande) var(--r-grande);background:var(--marino);color:var(--crema);
  -webkit-mask:radial-gradient(circle 16px at 0 0,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 16px at 100% 0,#0000 98%,#000) right / 51% 100% no-repeat;
          mask:radial-gradient(circle 16px at 0 0,#0000 98%,#000) left / 51% 100% no-repeat,radial-gradient(circle 16px at 100% 0,#0000 98%,#000) right / 51% 100% no-repeat}
.boleto__talon::before{content:"";position:absolute;left:24px;right:24px;top:0;border-top:3px dashed rgb(242 237 232 / .35)}
.boleto__tipo{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cielo)}
.boleto__numero{font:900 clamp(1.35rem,.9rem + 1.2vw,1.75rem)/1 var(--letra);letter-spacing:0;overflow-wrap:anywhere}
.boleto__estado{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600}
.boleto__estado b{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:6px;background:var(--cielo);color:var(--marino-noche);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.06em}
.boleto__vigencia{font-weight:700;color:var(--cielo-claro)}
.boleto__talon a{justify-self:start;margin-top:4px;color:var(--cielo-claro)}
.boleto__pista{font-size:.9rem;color:rgb(242 237 232 / .78)}
@media (min-width:640px){
  .boleto{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}
  .boleto__cuerpo{border-radius:var(--r-grande) 0 0 var(--r-grande);
    -webkit-mask:radial-gradient(circle 16px at 100% 0,#0000 98%,#000) top / 100% 51% no-repeat,radial-gradient(circle 16px at 100% 100%,#0000 98%,#000) bottom / 100% 51% no-repeat;
            mask:radial-gradient(circle 16px at 100% 0,#0000 98%,#000) top / 100% 51% no-repeat,radial-gradient(circle 16px at 100% 100%,#0000 98%,#000) bottom / 100% 51% no-repeat}
  .boleto__talon{align-content:center;border-radius:0 var(--r-grande) var(--r-grande) 0;
    -webkit-mask:radial-gradient(circle 16px at 0 0,#0000 98%,#000) top / 100% 51% no-repeat,radial-gradient(circle 16px at 0 100%,#0000 98%,#000) bottom / 100% 51% no-repeat;
            mask:radial-gradient(circle 16px at 0 0,#0000 98%,#000) top / 100% 51% no-repeat,radial-gradient(circle 16px at 0 100%,#0000 98%,#000) bottom / 100% 51% no-repeat}
  .boleto__talon::before{left:0;right:auto;top:24px;bottom:24px;border-top:0;border-left:3px dashed rgb(242 237 232 / .35)}
}

@media (prefers-reduced-motion:reduce){
  .escenario__fondo img,.escenario__fondo.es-activo img{animation:none;transform:none}
  .js .titular__grande > span,.js .titular__pie > span{transform:none}
  .js .titular em{clip-path:none}
  .js .estampa{opacity:1}
  .js .abanico:not(.visto) .abanico__carta{transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--giro)) scale(var(--esc))}
  .boleto{transform:none!important}
}