/* ==== KAYTES MOCK STYLE ==== */
:root{
  --k-blue:#09183e; /* azul del mock */
  --k-txt:#09183e;
  --k-gray:#8e8e8e;
  --k-bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--k-bg);color:var(--k-txt);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* Contenedor general con márgenes como el mock */
.k-container{padding:20px 18px 100px 18px;}

/* Top bar azul y logo en rombo centrado que sobresale */
.k-topbar{height:78px;background:var(--k-blue);position:relative;}
.k-topbar__logo{
  position:absolute;
  left:50%;
  bottom:-55px;                 /* sobresale desde la barra azul */
  transform:translateX(-50%);   /* centrado horizontal */
  width:auto;
  height:auto;
  background:none;              /* sin fondo */
  border:none;                  /* sin bordes */
  display:flex;
  align-items:center;
  justify-content:center;
}
.k-topbar__logo img{
  width:110px;                  /* ajusta el tamaño aquí */
  height:auto;
  object-fit:contain;
}

/* HERO (del mock inicial) */
.k-hero{margin-top:40px;text-align:center}
.k-hero__card{
  margin:0 auto;max-width:360px;border:3px solid var(--k-blue);
  border-radius:18px;padding:26px 12px;background:#fff;
}
.k-hero__photo{font-weight:900;font-size:64px;letter-spacing:2px;}
.k-hero__caption{color:#9aa0a6;font-weight:800;margin-top:4px}
.k-hero__title{font-size:38px;font-weight:900;margin:16px 0 0 0;}
.k-hero__desc{color:#9aa0a6;font-weight:800;margin:6px 0 14px}
.k-btn{display:inline-block;border-radius:10px;padding:10px 16px;font-weight:900;text-decoration:none}
.k-btn--primary{background:var(--k-blue);color:#fff}
.k-hero__pager{margin-top:10px;color:#6d7480;font-weight:800;display:flex;gap:10px;justify-content:center;align-items:center}
.k-hero__chev{font-weight:900}

/* TILE (bloque repetible) */
.k-tile{margin-top:30px}
.k-tile__card{max-width:360px;margin:0 auto}
.k-tile__photo{border:3px solid var(--k-blue);border-radius:18px;background:#fff;padding:18px;position:relative;}
.k-tile__photo img{width:100%;height:210px;object-fit:cover;border-radius:12px;border:2px solid var(--k-blue);background:#f5f7fb;}
.k-tile__photoLabel{position:absolute;left:26px;top:12px;text-align:left;color:var(--k-blue)}
.k-tile__photoMain{display:block;font-weight:900;font-size:44px;line-height:0.9}
.k-tile__photoSub{display:block;font-weight:900;font-size:24px}
.k-tile__info{padding:16px 6px}
.k-tile__desc{font-weight:900;white-space:pre-wrap;margin:0 0 12px 12px;}
.k-repeat-note{margin:22px 0 0 12px;font-weight:900;}

/* ===================== BOTTOM NAV (Unificado y alineado) ===================== */
.k-bottomnav{
  position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--k-blue);
  color:#fff;display:flex;align-items:center;justify-content:space-around;border-top:3px solid #fff;z-index:20;
  padding:0 12px;                 /* margen lateral para que nada se corte */
}
.k-bottomnav__item{
  position:relative;              /* el badge se ancla a cada item */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-decoration:none;color:#fff;
}
.k-bottomnav__icon{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:24px;height:24px;
}
.k-bottomnav__icon img,
.k-bottomnav__icon svg{
  width:24px;height:24px;object-fit:contain;display:block;
}
.k-bottomnav__icon svg{stroke:#fff;fill:none}

/* Texto uniforme y alineado */
.k-bottomnav__label{
  font-weight:900;letter-spacing:.4px;
  font-size:14px;line-height:1.2;   /* mismo tamaño para todos */
}

/* Enlaces del footer */
footer.k-bottomnav a,
footer.k-bottomnav a:visited{color:#fff !important;text-decoration:none !important;font-weight:900}
footer.k-bottomnav a:hover,
footer.k-bottomnav a:focus{color:#868686 !important}

/* Carrito + badge (dentro del botón, sin cortarse) */
.k-bottomnav__cart{color:#fff !important}
.k-cart-badge{
  position:absolute;top:-6px;right:2px;  /* dentro del botón */
  background:#ff3b30;color:#fff;border-radius:10px;
  min-width:20px;height:20px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2;
  pointer-events:none;              /* no bloquea el click */
}

/* ====== BLOQUE TIPO “STATUS” ====== */
.k-tile--alt{max-width:760px;margin:28px auto 44px auto;padding:0 6px}
.k-heroimg{margin:0}
.k-heroimg img{
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  display:block;
  background:#fff;
}

/* Redes sociales (sección inferior) */
.social-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: -30px;         /* cerca del bloque anterior */
  padding-bottom: 80px;      /* respiro con el footer fijo */
}
.social-link { color: #000; transition: color .2s ease; }
.social-link:hover { color: #09183e; }

/* bloque de texto */
.k-sectioncopy{margin-top:18px;padding-left:6px}
.k-eyebrow{color:#9aa0a6;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.k-heading{margin:0 0 10px 0;font-size:34px;line-height:1.1;font-weight:800;}
.k-lead{margin:0 0 18px 0;color:#4b5563;font-size:16px;line-height:1.5;}
.k-btn--outline{background:transparent;color:var(--k-txt);border:2px solid currentColor;border-radius:6px;padding:10px 18px;font-weight:800;display:inline-block;}
.k-btn--outline:hover{opacity:.85}

/* ===== Carrusel (fade limpio y estable) ===== */
.k-slidebox{
  position:relative;
  width:100%;
  aspect-ratio:16/9;       /* altura estable */
  border-radius:12px;      /* borde redondo aquí */
  overflow:hidden;
}
.k-slides{ position:relative; height:100%; touch-action:pan-y; }
.k-slide{ position:absolute; inset:0; transform:translateX(100%); will-change:transform; }
.k-slides.animating .k-slide{ transition:transform .35s cubic-bezier(.22,.61,.36,1); }
.k-slide.is-active{ transform:translateX(0); }
.k-slide__media, .k-slide__media img{ width:100%; height:100%; }
.k-slide__media img{
  object-fit:cover; display:block; border-radius:inherit;
  -webkit-user-drag:none; user-select:none;
}

/* ===================== HERO SLIDER (nuevo) ===================== */
.k-hero-slider{ max-width: 1100px; margin: 24px auto 32px; padding: 0 20px; }
.k-hero-frame{
  position: relative; width: 100%; aspect-ratio: 21/9;
  border-radius: 16px; overflow: hidden; background: #f3f4f6;
}
.k-hero-slides{ position: relative; height: 100%; }
.k-hero-slide{ position: absolute; inset: 0; transform: translateX(100%); will-change: transform; }
.k-hero-slides.animating .k-hero-slide{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.k-hero-slide.is-active{ transform: translateX(0%); }
.k-hero-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; -webkit-user-drag: none; user-select: none; }

/* Copy centrado, como la referencia */
.k-hero-copy{ text-align: center; padding: 22px 10px 0; }
.k-hero-title{
  margin: 6px 0 10px; font-weight: 800; letter-spacing: .02em;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; color: var(--k-txt);
}
.k-hero-desc{
  margin: 0 auto 18px; color: #4b5563;
  font-size: clamp(14px, 1.5vw, 18px); line-height: 1.6; max-width: 920px;
}

/* Botón grande, negro, centrado */
.k-hero-cta{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: clamp(180px, 28vw, 280px); height: clamp(44px, 6.2vw, 56px);
  padding: 0 28px; border-radius: 8px;
  background: #ffffff; color: #09183e; border: 2px solid #09183e;
  font-weight: 800; letter-spacing: .04em; text-decoration: none; text-transform: uppercase;
  transition: transform .12s ease, opacity .12s ease, background .12s ease;
}
.k-hero-cta:hover{ opacity: .92; }
.k-hero-cta:active{ transform: scale(.98); }

/* Paginador centrado con separador arriba */
.k-hero-pager{
  position: relative; margin-top: 20px; padding-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: #6b7280; font-weight: 700;
}
.k-hero-pager::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; top:0; background:#e5e7eb;
}
.k-hero-nav{
  appearance: none; border: 1px solid #d1d5db; background: #fff;
  width: 34px; height: 28px; border-radius: 6px; cursor: pointer;
  color: #374151; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.k-hero-nav:hover{ background:#f9fafb; }
.k-hero-counter{ min-width: 64px; text-align:center; }

/* Badge del carrito en otra variante (compat) */
.bottom-nav .nav-cart #cart-count{
  background: #ff3b30;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  position: absolute;
  top: -6px;
  right: -12px;
  padding: 0 4px;
}

/* ===== Patch footer (bottom-nav genérico, por compatibilidad) ===== */
footer .bottom-nav a,
footer .bottom-nav a:visited{ color:#fff !important; text-decoration:none !important; font-weight:900; }
footer .bottom-nav a:hover,
footer .bottom-nav a:focus{ color:#868686 !important; }
footer .bottom-nav .nav-cart{ position:relative; color:#fff !important; font-size:20px; }
footer .bottom-nav .nav-cart #cart-count{
  position:absolute; top:-6px; right:-10px;
  background:#ff3b30; color:#fff; border-radius:10px;
  min-width:20px; height:20px; padding:0 6px; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* Responsivo móvil: imagen menos panorámica */
@media (max-width: 768px){
  .k-hero-slider{ margin: 16px auto 24px; padding: 0 16px; }
  .k-hero-frame{ aspect-ratio: 16/9; border-radius: 14px; }
}