/* Card de producto de chollo (compartida por la home y las páginas de mundo) */
:root {
  --color-principals-secondary-dark: #737373;
  --color-principals-secondary-medium: #9e9e9e;
  --color-principals-secondary: #cccccc;
  --color-principals-secondary-light: #eaeaea;
  --color-principals-secondary-lighter: #f7f7f7;
  /* Botón: mismos colores que el badge de fechas */
  --btn-red: #FB243F;
  --btn-red-hover: #e8173a;
  --btn-red-shade: #C0002B;
  --btn-ink: #0b0f1e;
  /* Card «Carrocería de acero» (DeLorean): acero cepillado, rejilla trasera y luces de estado */
  --steel-ink: #121417;
  --steel-ink-2: #3f444b;
  --steel-mute: #4e545b;
  --neon-blue: #59d8ff;   /* activo */
  --neon-green: #44ff86;  /* tiempo extra */
  --led-red: #ff3d33;     /* próximamente */
  --led-amber: #ffb01f;   /* caducado */
}
/* Card de chollo: foto arriba, rejilla negra y contenido abajo en todos los tamaños.
   Activo y tiempo extra: acero casi blanco. Próximamente y caducado: acero más apagado y foto borrosa en blanco y negro. */
.chollo[hidden] { display: none; }
.chollo { --px-ink: #000; --card-shadow: 0 8px 0 #000, 0 14px 26px rgba(0, 0, 0, .5); --neon: var(--neon-blue);
  position: relative; color: var(--steel-ink); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 20px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, rgba(0, 0, 0, .018) 1px 2px, rgba(255, 255, 255, 0) 2px 4px),
    linear-gradient(165deg, #ffffff 0%, #f1f3f5 40%, #fafbfc 58%, #dde1e5 100%);
  box-shadow: var(--card-shadow), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  transition: transform .18s ease; }
.chollo:not(.is-expired):not(.chollo--locked):hover { transform: translateY(-4px); }
/* Borde de neón suave al pasar el ratón (por dentro, porque la esquina cortada recorta lo de fuera) */
.chollo:not(.is-expired):not(.chollo--locked):not(.chollo--all):hover,
.featured__strip:not(.is-dragging) > .chollo:not(.is-expired):not(.chollo--locked):not(.chollo--all):hover { box-shadow: var(--card-shadow), inset 0 0 0 1.5px rgba(89, 216, 255, .8), inset 0 0 12px rgba(89, 216, 255, .25); }
.chollo .chollo__img { position: relative; flex: none; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; border-bottom: 0; }
/* Luz de neón del estado en el borde inferior de la foto (activo azul, tiempo extra verde; nada en próximamente y caducado) */
.chollo__img::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: var(--neon); box-shadow: 0 0 10px var(--neon), 0 0 22px color-mix(in srgb, var(--neon) 60%, transparent); }
.chollo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease, filter .3s; }
.chollo:not(.is-expired):not(.chollo--locked):hover .chollo__img img { transform: scale(1.04); }
.chollo__body { min-width: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.chollo__title { font-size: 20px; font-weight: 600; line-height: 1.3; }
.chollo__nights { font-size: 15px; color: var(--steel-ink-2); margin-top: 2px; }
.chollo__tags { list-style: none; margin: 4px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chollo__tags li { font-size: 15px; line-height: 1.3; color: #1d2024; background: rgba(0, 0, 0, .07); border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px; padding: 2px 8px; }
/* Datos de la ficha: hotel con estrellas y nota del viaje */
.chollo__hotel { margin: 4px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--steel-ink); }
.chollo .deal__stars { color: #FFC81A; letter-spacing: 1px; text-shadow: 0 1px 0 #8a5a00; white-space: nowrap; font-weight: 400; }
.chollo__rating { margin: 2px 0 0; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 15px; color: var(--steel-ink-2); }
.chollo__rating b { font-size: 16px; color: #f1f3f5; background: #15171a; padding: 1px 7px; border-radius: 3px; }

/* Qué incluye: lista esquemática con check verde (como "Este viaje incluye" de la ficha) */
.chollo__incluye { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chollo__incluye li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.4; color: var(--steel-ink); }
.chollo__incluye li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #1f9d55
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.chollo--locked .chollo__incluye li::before, .chollo.is-expired .chollo__incluye li::before { background-color: var(--steel-mute); }
.chollo__desc { font-size: 17px; line-height: 1.45; color: #2a2e33; margin-top: 4px; }
.chollo__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-s, 12px); flex-wrap: wrap; }
/* Precio: grande y en el rojo de la marca */
.chollo__price { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.chollo__price small { font-size: 17px; color: var(--steel-ink-2); }
.chollo__price span { font-size: 17px; color: var(--steel-ink-2); }
.chollo__price b { font-size: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--btn-red-shade); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
/* Botón rojo liso */
.chollo__btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 3px; font-weight: 700; font-size: 16px; line-height: 1.2; color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #ff5a6b 0%, var(--btn-red) 45%, var(--btn-red-shade) 100%);
  border: 2px solid #0b0d10; box-shadow: 0 3px 0 #0b0d10, 0 0 14px rgba(251, 36, 63, .35); text-shadow: 0 1px 0 var(--btn-red-shade); transition: transform .08s, box-shadow .15s, filter .15s; }
.chollo__btn:hover { filter: brightness(1.08); box-shadow: 0 3px 0 #0b0d10, 0 0 22px rgba(251, 36, 63, .6); }
.chollo__btn:active { transform: translateY(3px); box-shadow: 0 0 0 #0b0d10; }
.chollo__btn:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 3px; }

/* Etiqueta sobre la foto: placa LED con el color del estado */
.chollo__badge { --led: var(--neon-blue); position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 3px;
  font: 700 12px/1 "Orbitron", var(--f-body, "Outfit"), system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--led);
  background: rgba(5, 6, 7, .86); border: 1px solid color-mix(in srgb, var(--led) 55%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--led) 40%, transparent); }
.chollo__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--led); box-shadow: 0 0 6px var(--led); }
.chollo__badge svg { width: 13px; height: 13px; fill: currentColor; margin: -2px 0; }
.chollo__badge--lock { --led: var(--led-red); }
.chollo__badge--expired { --led: var(--led-amber); }
.chollo__badge--extra { --led: var(--neon-green); }
.chollo__badge--extra::before { display: none; }
.chollo__badge--nivel { display: none; }

/* Próximamente y caducado: acero más apagado, foto del mismo chollo borrosa y en blanco y negro, sin neón */
.chollo--locked, .chollo.is-expired { --neon: transparent; background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 1px, rgba(0, 0, 0, .04) 1px 2px, rgba(255, 255, 255, 0) 2px 4px),
    linear-gradient(165deg, #b9bec4 0%, #979ea6 40%, #aab0b6 55%, #6f767e 100%); }
.chollo--locked .chollo__img img, .chollo.is-expired .chollo__img img { filter: grayscale(1) blur(4px) brightness(.85); transform: scale(1.08); }
.chollo--locked .chollo__title, .chollo.is-expired .chollo__title, .chollo.is-expired .chollo__hotel, .chollo--locked .chollo__hotel { color: #3a3f45; }
.chollo--locked .chollo__rating b, .chollo.is-expired .chollo__rating b { background: var(--steel-mute); }
.chollo--locked .chollo__price b, .chollo.is-expired .chollo__price b { color: var(--steel-mute); text-shadow: none; }
.chollo--locked .chollo__btn, .chollo.is-expired .chollo__btn { cursor: default; pointer-events: none; color: #c9cdd2; text-shadow: none; filter: none;
  background: linear-gradient(180deg, #4a4f56, #33373d); box-shadow: 0 3px 0 #0b0d10; }
.chollo__lock, .chollo__stamp { display: none; }
.chollo__date { font-weight: 700; color: var(--steel-ink); }

/* Tiempo extra (chollo alargado): como el activo, en verde, con estelas de fuego bajo la foto y el borde que se carga */
.chollo.is-extra { --neon: var(--neon-green); animation: chollo-carga 2.4s ease-in-out infinite; }
.chollo__trails { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 120, 20, 0) 8%, rgba(255, 140, 30, .85) 40%, rgba(255, 230, 120, .95) 52%, rgba(255, 90, 20, .7) 70%, transparent 100%) 0 70% / 100% 4px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(255, 90, 20, .7) 30%, rgba(255, 220, 110, .95) 58%, rgba(255, 120, 20, .8) 80%, transparent 100%) 0 92% / 100% 5px no-repeat,
    linear-gradient(0deg, rgba(255, 90, 20, .35), transparent);
  mix-blend-mode: screen; animation: chollo-fuego 1.6s steps(6) infinite; }
@keyframes chollo-fuego { 0%, 100% { opacity: 1; } 30% { opacity: .78; } 60% { opacity: .95; } 80% { opacity: .7; } }
@keyframes chollo-carga { 0%, 100% { box-shadow: var(--card-shadow), 0 0 0 1px rgba(68, 255, 134, .5), 0 0 18px rgba(68, 255, 134, .28); }
  50% { box-shadow: var(--card-shadow), 0 0 0 1px rgba(68, 255, 134, .9), 0 0 30px rgba(68, 255, 134, .55); } }
@media (prefers-reduced-motion: reduce) {
  .chollo, .chollo__img img, .chollo__btn { transition: none; }
  .chollo.is-extra, .chollo__trails { animation: none; }
}

.chollo__world { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--btn-red-shade); text-decoration: none; }

/* Card final "Descúbrelos todos": salpicadero oscuro con borde de neón azul, el personaje de la home, estela de fuego abajo y botón rojo */
.chollo--all { clip-path: none; border-radius: 10px; color: #fff; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 24px 20px 28px; text-decoration: none;
  background: radial-gradient(90% 60% at 50% 30%, rgba(89, 216, 255, .16), transparent 70%), linear-gradient(180deg, #11151b, #07090c);
  box-shadow: var(--card-shadow), inset 0 0 0 1.5px rgba(89, 216, 255, .75), inset 0 0 22px rgba(89, 216, 255, .18); }
.chollo--all::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, transparent 2%, rgba(255, 140, 30, .85) 35%, rgba(255, 230, 120, .95) 52%, rgba(255, 90, 20, .7) 75%, transparent 98%);
  box-shadow: 0 0 10px rgba(255, 140, 30, .6); }
.chollo--all img { width: min(170px, 60%); height: auto; filter: drop-shadow(0 10px 18px rgba(255, 140, 26, .25)); transition: transform .3s ease; }
.chollo--all:hover img { transform: translateY(-4px) rotate(-3deg); }
.chollo--all strong { font-size: 26px; font-weight: 700; line-height: 1.15; color: #FFC81A; }
.chollo--all span { font-size: 16px; color: #d6d8dc; max-width: 22ch; }
.chollo--all em { font-style: normal; margin-top: 6px; background: linear-gradient(180deg, #ff5a6b 0%, var(--btn-red) 45%, var(--btn-red-shade) 100%); color: #fff; font-weight: 700; padding: 10px 20px;
  border: 2px solid #0b0d10; border-radius: 3px; box-shadow: 0 3px 0 #0b0d10, 0 0 14px rgba(251, 36, 63, .35); text-shadow: 0 1px 0 var(--btn-red-shade); }
.chollo--all:hover em { filter: brightness(1.08); }
.chollo--all:focus-visible { outline: 3px solid var(--neon-blue); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .chollo--all img { transition: none; } }
/* "Incluye ..." en una frase corta: máximo 3 líneas */
.chollo__desc--corta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; color: #2a2e33; }

/* Activo: etiqueta azul con la fecha hasta la que se puede reservar */
.chollo__badge--hasta { --led: var(--neon-blue); }
/* Próximamente: candado en un círculo sobre la foto borrosa */
.chollo--locked .chollo__img::before { content: ""; position: absolute; z-index: 3; top: 50%; left: 50%; width: 54px; height: 54px; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: rgba(5, 6, 7, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='5' y='10' width='14' height='10' rx='2.5' fill='%23fff'/%3E%3C/svg%3E") center / 26px no-repeat;
  border: 1.5px solid rgba(255, 255, 255, .5); }
/* Agotado y caducado: acero apagado como próximamente, foto nítida y una franja de color abajo en la foto
   (agotado: blanco y negro + franja magenta; caducado: sepia + franja ámbar). Precio real en gris, sin tachar. */
.chollo.is-expired .chollo__img img { filter: grayscale(1) brightness(.7) contrast(1.05); transform: none; }
.chollo.is-expired:not(.is-soldout) .chollo__img img { filter: sepia(.9) saturate(.8) brightness(.75) contrast(1.05); }
.chollo__band { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 9px 12px; text-align: center;
  font: 700 14px/1 "Orbitron", var(--f-body, "Outfit"), system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.chollo__band--soldout { background: rgba(120, 10, 95, .88); color: #ffd3f4; border-top: 1px solid #ff46d2; }
.chollo__band--expired { background: rgba(90, 58, 10, .9); color: #ffe2a8; border-top: 1px solid #ffb01f; }