/* Home public (ligero). Prefijos ck-home/ck-card para no pisar tema */
:root{
  --ck-primary:#2d31d1;
  --ck-primary-hover:#2327b8;
  --ck-primary-soft:rgba(45,49,209,.12);
}

.ck-home{padding:0 0 48px;}
.ck-home--context{padding:0;margin:0 0 18px;}
.ck-home__wrap{max-width:1200px;margin:0 auto;}

/* =========================
   HERO base (modo normal sin banner)
   ========================= */
.ck-hero{
  position:relative;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(255,120,0,.14), rgba(40,120,255,.14));
  border: 1px solid rgba(0,0,0,.06);
  overflow:hidden;
  margin-bottom:18px; /* un poco menos para que el buscador “pegue” mejor */
}

.ck-hero__inner{
  max-width:1180px;
  margin:0 auto;
  padding:22px 18px;
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:18px;
  position:relative;
  z-index:2;
}

@media (max-width: 860px){
  .ck-hero__inner{grid-template-columns:1fr;}
  .ck-hero__title{font-size:30px;}
}

.ck-hero__text{
  max-width:64ch;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:16px;
}
.ck-hero__kicker{font-weight:700;opacity:.85;margin-bottom:8px;}
.ck-hero__title{font-size:38px;line-height:1.06;margin:0 0 10px;}
.ck-hero__sub{margin:0 0 14px;opacity:.85;max-width:56ch;}
.ck-hero__actions{display:flex;gap:10px;flex-wrap:wrap}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700}
.ck-btn--primary{background:#2563eb;color:#fff}
.ck-btn--ghost{background:#fff;border:1px solid rgba(0,0,0,.12);color:#111}

.ck-hero__art{
  border-radius:14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,99,71,.35), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(59,130,246,.35), transparent 55%),
    linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
  min-height:160px;
}

/* =========================
   HERO con Banner (modo full)
   ========================= */
.ck-hero--full.ck-hero--has-banner{
  padding:0;
  background:transparent;
  border:0;
  border-radius:18px;
  margin-bottom:14px;
}

/* Contenedor del slider */
.ck-hero__slider{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(0,0,0,.03);

  /* Desktop ratio esperado */
  aspect-ratio: 1920 / 700;

  /* Fallback por si aspect-ratio no aplica */
  min-height:280px;
}

/* Mobile ratio esperado */
@media (max-width: 820px){
  .ck-hero__slider{
    aspect-ratio: 1080 / 1350;
    min-height:420px;
    border-radius:16px;
  }
}

/* Track y slides */
.ck-hero__track{position:relative;width:100%;height:100%;}
.ck-hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.ck-hero__slide.is-active{opacity:1;pointer-events:auto;}

/* Picture ocupa todo */
.ck-hero__picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* Imagen */
.ck-hero__picture img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Mobile: suele rendir mejor top */
@media (max-width: 820px){
  .ck-hero__picture img{ object-position:center top; }
}

/* Etiqueta “Publicidad” */
.ck-hero__adtag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
  background:rgba(0,0,0,.55);
  color:#fff;
  backdrop-filter: blur(4px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

/* Importante: nada debe bloquear clicks del banner */
.ck-hero--full.ck-hero--has-banner .ck-hero__inner{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  display:block !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.ck-hero--has-banner .ck-hero__text,
.ck-hero--has-banner .ck-hero__art{display:none !important;}

/* Flechas */
.ck-hero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgb(200 200 217 / 61%) !important;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(4px);
}
.ck-hero__nav--prev{left:12px;}
.ck-hero__nav--next{right:12px;}
.ck-hero__nav:hover{background:rgba(174, 174, 185, 0.72) !important;}

/* Dots */
.ck-hero__dots{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  z-index:6;
  display:flex;
  gap:8px;
  justify-content:center;
}
.ck-hero__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:rgba(255,255,255,.55);
}
.ck-hero__dot.is-active{background:#fff;}

/* =========================
   TOP: Buscador + Quick categories
   ========================= */
.ck-home__top{
  margin-top:-12px; /* pegado al hero pero sin choques */
  margin-bottom:8px;
}

/* Buscador */
.ck-search{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:12px;

  /* QUITADO: margin-top:60px; (esto era el desastre) */
}

.ck-search__row{
  display:grid;
  grid-template-columns: 1.5fr .9fr .9fr auto;
  gap:10px;
  align-items:center;
}

.ck-search__q,
.ck-search__sel{
  width:100%;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:0 12px;
  outline:none;
}

.ck-search__q:focus,
.ck-search__sel:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.ck-search__btn{
  height:44px;
  padding:0 16px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  font-weight:900;
  background:var(--ck-primary) !important;
  color:#fff !important;
}
.ck-search__btn:hover{background:var(--ck-primary-hover) !important;}
.ck-search__btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ck-primary-soft);
}

@media (max-width: 980px){
  .ck-search__row{grid-template-columns: 1fr 1fr;}
  .ck-search__btn{grid-column:1/-1;}
}
@media (max-width: 560px){
  .ck-search__row{grid-template-columns: 1fr;}
}

/* =========================
   Quick categories (scroll horizontal limpio)
   ========================= */
.ck-quickcats{
  position:relative;
  isolation:isolate;
  display:flex;
  gap:12px;
  margin-top:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 2px 8px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.ck-quickcats::-webkit-scrollbar{height:8px}
.ck-quickcats::-webkit-scrollbar-thumb{
  background:rgba(37,99,235,.22);
  border-radius:999px
}

.ck-quickcat{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  width:108px;
  height:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:16px;
  text-decoration:none;
  background: linear-gradient(180deg, #ffffff, rgba(37,99,235,.06));
  border:1px solid rgba(37,99,235,.28);
  box-shadow:0 10px 22px rgba(37,99,235,.10);
  color:#1e40af;
  font-weight:900;
  padding:10px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.ck-quickcat__ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.ck-quickcat__ico svg{width:28px;height:28px;display:block;stroke:currentColor;}

.ck-quickcat__label{
  font-size:12px;
  line-height:1.05;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (hover:hover) and (pointer:fine){
  .ck-quickcat:hover{
    transform: translateY(-1px);
    background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.06));
    border-color: rgba(37,99,235,.45);
    box-shadow:0 14px 28px rgba(37,99,235,.16);
  }
}
.ck-quickcat:active{transform: scale(.98);}
.ck-quickcat:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.18), 0 14px 28px rgba(37,99,235,.16);
}

@media (max-width: 560px){
  .ck-quickcat{ width:96px; height:90px; border-radius:14px; }
  .ck-quickcat__label{ font-size:11px; }
}

/* En móvil puedes ocultar el buscador grande si quieres */
@media (max-width: 560px){
  .ck-home__top .ck-search{ display:none !important; }
}

/* =========================
   Secciones + cards
   ========================= */
.ck-home__section{margin-top:18px;}
.ck-home__head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 0 10px;}
.ck-home__h2{font-size:20px;line-height:1.2;margin:0;}
.ck-home__more{font-weight:700;text-decoration:none;opacity:.8;color:var(--ck-primary);}
.ck-home__more:hover{opacity:1;color:var(--ck-primary-hover);}

.ck-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width: 980px){ .ck-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 680px){ .ck-grid{grid-template-columns:repeat(2,1fr);} }

.ck-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.ck-card__img{display:block;position:relative;aspect-ratio: 4/3;overflow:hidden}
.ck-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.ck-card__imgPh{width:100%;height:100%;background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02))}
.ck-card__badge{position:absolute;left:10px;top:10px;background:#ef4444;color:#fff;font-weight:800;padding:6px 10px;border-radius:999px;font-size:12px}
.ck-card__boost{position:absolute;top:12px;right:12px;background:#16a34a;color:#fff;border:1px solid rgba(0,0,0,.08);padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;line-height:1}

.ck-card__body{padding:12px}
.ck-card__title{font-size:14px;line-height:1.25;margin:0 0 10px}
.ck-card__title a{text-decoration:none;color:inherit}
.ck-card__prices{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.ck-card__now{font-size:16px;font-weight:900}
.ck-card__was{font-size:12px;opacity:.7;text-decoration:line-through}

.ck-card__cta{
  display:inline-flex;
  width:100%;
  align-items:center;
  justify-content:center;
  background:var(--ck-primary) !important;
  color:#fff !important;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
}
.ck-card__cta:hover{background:var(--ck-primary-hover) !important;}
.ck-card__cta:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ck-primary-soft);}

.ck-home__empty{opacity:.75;margin:6px 0 0}
.ck-skel{
  height:140px;border-radius:14px;
  background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02), rgba(0,0,0,.06));
  background-size:200% 100%;
  animation:ckSkel 1.1s infinite;
}
@keyframes ckSkel{0%{background-position:200% 0}100%{background-position:-200% 0}}

.ck-pager{margin-top:18px}
.ck-pager .page-numbers{
  display:inline-block;padding:8px 10px;border-radius:10px;
  border:1px solid rgba(0,0,0,.1);text-decoration:none;margin-right:6px
}
.ck-pager .current{background:#111827;color:#fff}

/* Marketing IA: ofertas impulsadas */
.ck-card.ck-card--boost{
  border:2px solid #22c55e;
  background:#dfffd8;
  box-shadow:0 10px 26px rgba(34,197,94,.18)
}


/*------- PROBANDO---------*/

/* ===== CK HOME CARD TUNING (Desktop-first, safe overrides) =====
   Objetivo:
   - Jerarquía visual (no todo negro)
   - Resaltar Flash con color distinto a Destacada
   - Botón siempre abajo (ya aplicado, reforzado)
   - Reducir alto de imagen (solo PC)
   - Mantener compatibilidad (no tocar estructura HTML)
*/

/* Quitar badge de % sobre imagen (home más limpio) */
.ck-card__badge{display:none !important;}

/* Jerarquía de texto y colores */
.ck-card__title{margin:0 0 6px 0;}
.ck-card__title a{color:#0f172a; text-decoration:none;}
.ck-card__title a:hover{text-decoration:underline;}

.ck-card__prices{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;}
.ck-card__now{
  color:#2d31d1;
  font-weight:800;
  letter-spacing:-0.2px;
}
.ck-card__was{color:#64748b; font-size:12px;}
.ck-card__was-label{color:#94a3b8;}
.ck-card__was-price{text-decoration:line-through; color:#94a3b8;}

.ck-card__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.ck-card__save{
  color:#0f172a;
  font-size:12px;
  font-weight:600;
}
.ck-card__countdown{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(253,186,116,.9);
  background:rgba(255,247,237,.9);
  color:#9a3412;
}

/* Botón: más aire y anclado abajo (siempre) */
.ck-card__body{display:flex; flex-direction:column;}
.ck-card__cta{
  margin-top:auto;
  padding:12px 14px;
  border-radius:12px;
}
.ck-card__meta + .ck-card__cta{margin-top:12px;}
.ck-card__prices + .ck-card__cta{margin-top:12px;}

/* Resaltados:
   - Destacada (ya existe ck-card--boost)
   - Flash: distinto color (ámbar/naranja)
*/
.ck-card--boost{
  border:1px solid rgba(34,197,94,.55);
  box-shadow:0 8px 22px rgba(34,197,94,.12);
}

/* Flash dentro de la sección Flash (fallback robusto) */
.ck-home__body[data-ck-home-section="flash"] .ck-card{
  border:1px solid rgba(245,158,11,.70);
  box-shadow:0 8px 22px rgba(245,158,11,.14);
  background:linear-gradient(180deg, rgba(255,251,235,.95), #ffffff 55%);
}

.ck-card__pill--flash{
  color:#9a3412;            /* texto */
  background:rgba(255,247,237,.9); /* fondo */
  border-color:rgba(253,186,116,.9);
  font-weight: 700;
}

.ck-card__pill--boost{
  color:#166534;            /* texto */
  background:rgba(242,255,246,.95);
  border-color:rgba(34,197,94,.55);
  font-weight: 700;
}


/* Flash en cualquier sección (mejor esfuerzo): navegadores modernos */
@supports selector(.ck-card:has(.ck-card__countdown)){
  .ck-card:has(.ck-card__countdown){
    border:1px solid rgba(245,158,11,.55);
    background: rgb(255 229 222);
  }
}

/* Force: cards stretch + CTA abajo (PC) */
@media (min-width: 992px){
  .ck-card__img{aspect-ratio:16/10; overflow:hidden;}
  .ck-card__img img{width:100%; height:100%; object-fit:cover;}
  .ck-grid{ align-items: stretch !important; }

  .ck-grid .ck-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }

  .ck-grid .ck-card__body{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
  }

  .ck-grid .ck-card__cta{
    margin-top:auto !important;
  }
  .ck-card__countdown {
    margin-bottom: 12px;
  }
}