/* =====================================================================
   Kécasa — Sitio público
   Traslado fiel de la maqueta aprobada a CSS de producción.
   Se añaden puntos de quiebre: la maqueta era sólo escritorio y el
   tráfico real de WhatsApp llega desde el teléfono.
   ===================================================================== */

:root {
  /* Ámbar Solar y Orquídea Imperial, del manual de marca (pág. 15). */
  --naranja:      #f09d39;
  --naranja-osc:  #4A2410;
  --morado:       #9f2f6c;
  --morado-2:     #7E2455;
  --tinta:        #2E1B2C;
  --crema:        #FFFCF7;
  --crema-2:      #FFF3E0;
  --crema-3:      #FBF5EC;
  --crema-4:      #F6EDE2;
  --blanco:       #FFFFFF;

  --borde:        #F0E4D4;
  --borde-2:      #EADCC9;
  --borde-3:      #E3D3BE;

  --texto:        #4A3A47;
  --gris:         #7A6558;
  --gris-2:       #A2907F;
  --gris-3:       #B8A492;
  --gris-4:       #5C4A58;

  --verde:        #4E8B3B;
  --verde-osc:    #3E7A2E;
  --verde-suave:  #E8F5E2;
  --whatsapp:     #25D366;

  /* Horizonte Azul, el tercero del manual. El que había era parecido
     pero no era. */
  --azul:         #4797de;
  --azul-osc:     #24619B;
  --azul-suave:   #EAF3FC;

  --rojo:         #E4413B;

  --ancho:        1240px;
  --radio:        20px;
  --sombra:       0 20px 38px rgba(46, 27, 44, .14);
  --curva:        cubic-bezier(.2, .7, .3, 1);

  /* Montserrat, del manual de marca (pág. 23). */
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto-fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--crema);
  font-family: var(--texto-fuente);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--morado); text-decoration: none; transition: color .2s; }
a:hover { color: var(--naranja); }

img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borde-2); border-radius: 8px; }

.kc-contenedor { max-width: var(--ancho); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* Sólo lectores de pantalla */
.kc-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   Animaciones
   --------------------------------------------------------------------- */
@keyframes kcRise    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kcFloat   { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(9deg) translateY(-10px); } }
@keyframes kcRing    { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes kcBlob    { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,26px) scale(1.08); } }
@keyframes kcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kcPop     { 0% { transform: scale(.85); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
[data-reveal].kc-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   Barra de anuncios
   --------------------------------------------------------------------- */
.kc-anuncios { background: var(--morado); color: #FFE9C7; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.kc-anuncios .kc-contenedor {
  padding-top: 9px; padding-bottom: 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.kc-anuncios__grupo { display: flex; gap: 28px; align-items: center; }
.kc-anuncios__sep { opacity: .55; }

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
.kc-cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,252,247,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
}
.kc-cabecera .kc-contenedor {
  padding-top: 14px; padding-bottom: 14px;
  display: flex; align-items: center; gap: 28px;
}

/* EL LOGOTIPO YA TRAE SU PROPIA CAJA.

   Aquí había una: fondo morado, esquinas asimétricas y una rotación de
   un grado y medio. Era bonita y era un logo inventado — el manual de
   marca trae su contenedor hexagonal dibujado y prohíbe cambiarlo de
   estructura o de dirección (pág. 12: no deformar, no cambiar de color,
   no cambiar de dirección, no cambiar la estructura).

   Lo que queda es el ancla: dónde se coloca y que no se encoja. La cara
   la pone `.marca`, que es la misma en el panel y en el sitio. */
.kc-logo {
  display: inline-flex; align-items: center;
  flex: none;
}

.kc-nav { display: flex; gap: 6px; align-items: center; }
.kc-nav a {
  font-size: 15px; font-weight: 800; padding: 9px 15px;
  border-radius: 999px; color: var(--gris-4); transition: .15s;
}
.kc-nav a:hover { background: var(--crema-4); color: var(--morado); }
.kc-nav a.kc-activo { background: var(--crema-2); color: var(--morado); }

.kc-buscador {
  display: flex; align-items: center; gap: 10px;
  background: var(--blanco); border: 1.5px solid var(--borde-2);
  border-radius: 999px; padding: 9px 16px; width: 270px; margin-left: auto;
}
.kc-buscador__icono { color: var(--gris-3); font-size: 15px; }
.kc-buscador input {
  border: none; outline: none; background: transparent;
  font-size: 14px; width: 100%; color: var(--tinta);
}

/* Botones ------------------------------------------------------------- */
.kc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 800; border-radius: 999px; border: none; cursor: pointer;
  text-align: center; transition: background .2s, color .2s, transform .25s var(--curva), box-shadow .25s;
}
.kc-btn--naranja {
  background: var(--naranja); color: var(--blanco); font-size: 14px; padding: 11px 20px;
  box-shadow: 0 6px 16px rgba(255,158,22,.32);
}
.kc-btn--naranja:hover {
  background: var(--morado); color: var(--blanco);
  transform: translateY(-2px); box-shadow: 0 12px 24px rgba(138,27,122,.3);
}
.kc-btn--morado {
  background: var(--morado); color: var(--blanco); font-size: 16px; padding: 17px 34px;
  box-shadow: 0 10px 24px rgba(85,15,75,.28);
}
.kc-btn--morado:hover {
  background: var(--tinta); color: var(--blanco);
  transform: translateY(-3px); box-shadow: 0 16px 32px rgba(85,15,75,.36);
}
.kc-btn--linea {
  background: transparent; color: var(--naranja-osc);
  border: 2px solid rgba(74,36,16,.35); font-size: 16px; padding: 15px 30px;
}
.kc-btn--linea:hover {
  border-color: var(--naranja-osc); background: rgba(255,255,255,.22); transform: translateY(-3px);
}
.kc-btn--grande { font-size: 16px; padding: 17px 20px; }
.kc-btn--bloque { display: flex; width: 100%; }

/* ---------------------------------------------------------------------
   Imágenes con reserva
   --------------------------------------------------------------------- */
.kc-img { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--crema-3); }
.kc-img img { width: 100%; height: 100%; object-fit: cover; }
.kc-img--contener img { object-fit: contain; padding: 12px; }

.kc-img__reserva {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center;
  background: linear-gradient(140deg, var(--crema-2) 0%, var(--crema-3) 60%, #F3EADF 100%);
  color: var(--gris-2); font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.kc-img__marca {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--naranja); opacity: .55; line-height: 1;
}
.kc-img__texto { max-width: 90%; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.kc-hero { position: relative; background: var(--naranja); overflow: hidden; }
.kc-hero__blob { position: absolute; border-radius: 50%; background: rgba(255,255,255,.09); pointer-events: none; }
.kc-hero__blob--a { right: -140px; top: -120px; width: 520px; height: 520px; animation: kcBlob 14s ease-in-out infinite; }
.kc-hero__blob--b { left: -160px; bottom: -180px; width: 400px; height: 400px; background: rgba(255,255,255,.07); animation: kcBlob 18s ease-in-out infinite reverse; }

.kc-hero .kc-contenedor {
  padding-top: 70px; padding-bottom: 78px;
  display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr);
  gap: 56px; align-items: center; position: relative; z-index: 2;
}
.kc-hero__etiqueta {
  display: inline-block; background: var(--morado); color: #FFE9C7;
  font-weight: 800; font-size: 12.5px; letter-spacing: .14em;
  padding: 7px 16px; border-radius: 999px;
  animation: kcRise .6s var(--curva) both;
}
.kc-hero h1 {
  font-size: 76px; line-height: .98; letter-spacing: -.025em;
  color: var(--blanco); margin: 22px 0 0; text-wrap: balance;
}
.kc-hero h1 span { display: block; animation: kcRise .7s var(--curva) both; }
.kc-hero h1 span:nth-child(1) { animation-delay: .08s; }
.kc-hero h1 span:nth-child(2) { animation-delay: .18s; }
.kc-hero h1 span:nth-child(3) { animation-delay: .28s; }
.kc-hero__bajada {
  font-size: 19px; line-height: 1.55; color: var(--naranja-osc);
  max-width: 470px; margin: 22px 0 0; font-weight: 600;
  animation: kcRise .7s var(--curva) .38s both;
}
.kc-hero__acciones { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; animation: kcRise .7s var(--curva) .46s both; }
.kc-hero__cifras { display: flex; gap: 34px; margin-top: 44px; flex-wrap: wrap; }
.kc-hero__cifra { animation: kcRise .7s var(--curva) .56s both; }
.kc-hero__cifra:nth-child(2) { animation-delay: .64s; }
.kc-hero__cifra:nth-child(3) { animation-delay: .72s; }
.kc-hero__cifra b { display: block; font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--blanco); line-height: 1; }
.kc-hero__cifra span { font-size: 13px; font-weight: 700; color: #5A2E12; }

.kc-hero__figura { position: relative; animation: kcRise .8s var(--curva) .2s both; }
.kc-hero__sello {
  position: absolute; top: -16px; right: -6px; z-index: 4;
  background: var(--morado); color: var(--blanco);
  width: 118px; height: 118px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(85,15,75,.3);
  animation: kcPop .5s cubic-bezier(.2,1.3,.4,1) .7s both, kcFloat 5s ease-in-out 1.2s infinite;
}
.kc-hero__sello b { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; }
.kc-hero__sello span { font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.kc-hero__foto {
  height: 430px; overflow: hidden; background: #FFEFD6;
  clip-path: polygon(9% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 11%);
  position: relative;
}
.kc-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ---------------------------------------------------------------------
   Beneficios
   --------------------------------------------------------------------- */
.kc-beneficios { background: var(--blanco); border-bottom: 1px solid var(--borde); }
.kc-beneficios .kc-contenedor {
  padding-top: 26px; padding-bottom: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.kc-beneficio { display: flex; gap: 13px; align-items: flex-start; }
.kc-beneficio__icono {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  background: var(--crema-2); display: flex; align-items: center; justify-content: center;
  /* Iconos de línea del manual, morados por currentColor: aquí ya no
     hay emojis que hereden el estilo del sistema del visitante. */
  color: var(--morado);
}
.kc-beneficio b { display: block; font-weight: 800; font-size: 14.5px; color: var(--tinta); }
.kc-beneficio span { display: block; font-size: 13px; color: #8A7566; line-height: 1.4; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Encabezados de sección
   --------------------------------------------------------------------- */
.kc-seccion { max-width: var(--ancho); margin: 0 auto; padding: 64px 32px 8px; }
.kc-seccion--credito { padding: 68px 32px; }
.kc-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.kc-encabezado__tag { font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--naranja); }
.kc-encabezado h2 { font-size: 42px; margin: 6px 0 0; color: var(--tinta); }
.kc-encabezado__enlace { font-weight: 800; font-size: 15px; color: var(--morado); white-space: nowrap; }

/* ---------------------------------------------------------------------
   Tarjetas de categoría (volteo 3D)
   --------------------------------------------------------------------- */
.kc-categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.kc-cat { position: relative; height: 210px; perspective: 1400px; display: block; }
.kc-cat__giro {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.35,.05,.2,1);
}
.kc-cat:hover .kc-cat__giro,
.kc-cat:focus-visible .kc-cat__giro { transform: rotateY(180deg); }

.kc-cat__cara {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.kc-cat__frente { background: #F3EADF; }
.kc-cat__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(30,12,26,.82) 6%, rgba(30,12,26,.06) 62%);
}
.kc-cat__titulo { position: absolute; left: 20px; bottom: 16px; pointer-events: none; }
.kc-cat__titulo b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--blanco); line-height: 1.1; }
.kc-cat__titulo span { font-size: 13px; font-weight: 700; color: #FFD9A0; }

.kc-cat__reverso {
  background: var(--morado); transform: rotateY(180deg);
  display: flex; flex-direction: column;
}
.kc-cat__reverso-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px 9px; gap: 10px; }
.kc-cat__reverso-top b { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--blanco); line-height: 1; }
.kc-cat__reverso-top span { font-size: 12px; font-weight: 800; color: #FFD9A0; letter-spacing: .04em; white-space: nowrap; }
.kc-cat__cinta-caja {
  flex: 1; overflow: hidden; display: flex; align-items: center; padding-left: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.kc-cat__cinta { display: flex; width: max-content; animation: kcMarquee 15s linear infinite; }
.kc-cat__cinta-item { width: 116px; height: 116px; margin-right: 14px; border-radius: 15px; overflow: hidden; background: var(--blanco); flex: none; }
.kc-cat__desde { padding: 0 18px 14px; font-size: 12.5px; font-weight: 700; color: #E8C6E3; }

/* ---------------------------------------------------------------------
   Tarjeta de producto
   --------------------------------------------------------------------- */
.kc-rejilla { display: grid; gap: 20px; margin-top: 30px; }
.kc-rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.kc-rejilla--3 { grid-template-columns: repeat(3, 1fr); }

.kc-producto {
  display: flex; flex-direction: column;
  background: var(--blanco); border: 1.5px solid var(--borde);
  border-radius: var(--radio); overflow: hidden; height: 100%;
  color: inherit;
  transition: transform .32s var(--curva), box-shadow .32s, border-color .2s;
}
.kc-producto:hover { border-color: var(--naranja); box-shadow: var(--sombra); transform: translateY(-7px); color: inherit; }

.kc-producto__figura { position: relative; height: 190px; background: var(--crema-3); flex: none; }
.kc-rejilla--3 .kc-producto__figura { height: 196px; }
.kc-producto__sellos { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; pointer-events: none; flex-wrap: wrap; }

.kc-sello { font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; color: var(--blanco); }
.kc-sello--descuento { background: var(--rojo); }
.kc-sello--nuevo     { background: var(--azul); letter-spacing: .06em; }
.kc-sello--vendido   { background: var(--morado); letter-spacing: .06em; }

.kc-producto__cuerpo { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.kc-producto__marca { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--gris-3); }
.kc-producto__nombre { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--tinta); margin-top: 4px; min-height: 39px; }
.kc-producto__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.kc-producto__estrellas { color: var(--naranja); font-size: 13px; letter-spacing: 1px; }
.kc-producto__resenas { font-size: 12px; color: var(--gris-2); }
.kc-producto__relleno { flex: 1; }
.kc-producto__precios { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kc-producto__precio { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--morado); line-height: 1; }
.kc-producto__antes { font-size: 15px; color: var(--gris-3); text-decoration: line-through; font-weight: 700; }
.kc-producto__cuota { font-size: 13px; font-weight: 700; color: var(--verde); margin-top: 5px; }

.kc-estado { margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.kc-estado--tienda { background: var(--verde-suave); color: var(--verde-osc); }
.kc-estado--pedido { background: var(--crema-4); color: var(--gris-2); }

/* ---------------------------------------------------------------------
   Bloque de crédito
   --------------------------------------------------------------------- */
.kc-credito {
  background: var(--azul); border-radius: 30px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
}
.kc-credito__texto { padding: 54px 52px; min-width: 0; }
.kc-credito__tag {
  display: inline-block; background: rgba(255,255,255,.22); color: var(--blanco);
  font-weight: 800; font-size: 12.5px; letter-spacing: .12em; padding: 7px 15px; border-radius: 999px;
}
.kc-credito h2 { font-size: 44px; line-height: 1.04; color: var(--blanco); margin: 20px 0 0; }
.kc-credito p { font-size: 17px; line-height: 1.55; color: #EAF6FF; margin: 16px 0 0; font-weight: 600; max-width: 440px; }
.kc-credito__pasos { display: grid; gap: 12px; margin-top: 28px; }
.kc-paso {
  display: flex; gap: 13px; align-items: center;
  background: rgba(255,255,255,.14); padding: 13px 17px; border-radius: 15px;
}
.kc-paso b {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blanco); color: var(--azul);
  font-family: var(--display); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.kc-paso span { color: var(--blanco); font-weight: 700; font-size: 15px; }
.kc-credito__figura { position: relative; min-width: 0; min-height: 560px; overflow: hidden; }

/* ---------------------------------------------------------------------
   Testimonios
   --------------------------------------------------------------------- */
.kc-testimonios { background: var(--blanco); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.kc-testimonios .kc-contenedor {
  padding-top: 58px; padding-bottom: 58px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.kc-testimonio { background: var(--crema); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 26px 24px; }
.kc-testimonio__estrellas { color: var(--naranja); font-size: 15px; letter-spacing: 2px; }
.kc-testimonio p { font-size: 15.5px; line-height: 1.6; color: var(--texto); margin: 12px 0 0; font-weight: 600; }
.kc-testimonio__firma { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.kc-testimonio__foto { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex: none; background: var(--borde); }
.kc-testimonio__firma b { display: block; font-weight: 800; font-size: 14px; color: var(--tinta); }
.kc-testimonio__firma span { display: block; font-size: 12.5px; color: var(--gris-2); }

/* ---------------------------------------------------------------------
   Catálogo
   --------------------------------------------------------------------- */
.kc-pagina { max-width: var(--ancho); margin: 0 auto; padding: 34px 32px 70px; animation: kcRise .5s var(--curva) both; }
.kc-miga { font-size: 13px; font-weight: 700; color: var(--gris-2); }
.kc-miga a { color: var(--gris-2); }
.kc-miga a:hover { color: var(--morado); }
.kc-miga strong { color: var(--tinta); font-weight: 700; }
.kc-pagina h1 { font-size: 44px; margin: 8px 0 0; color: var(--tinta); }
.kc-pagina__sub { font-size: 16px; color: var(--gris); margin: 6px 0 0; font-weight: 600; }

.kc-catalogo { display: grid; grid-template-columns: 260px 1fr; gap: 30px; margin-top: 28px; align-items: start; }

.kc-filtros {
  background: var(--blanco); border: 1.5px solid var(--borde);
  border-radius: var(--radio); padding: 22px 20px; position: sticky; top: 96px;
}
.kc-filtros__top { display: flex; align-items: center; justify-content: space-between; }
.kc-filtros__top b { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--tinta); }
.kc-filtros__limpiar { font-size: 12.5px; font-weight: 800; color: var(--morado); }
.kc-filtros__rotulo { font-weight: 800; font-size: 12px; letter-spacing: .12em; color: var(--gris-3); margin: 22px 0 10px; }

.kc-filtros__lista { display: flex; flex-direction: column; gap: 6px; }
.kc-filtros__lista a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; padding: 9px 12px; border-radius: 11px;
  color: var(--texto); background: transparent; transition: .15s;
}
.kc-filtros__lista a:hover { background: var(--crema-4); color: var(--morado); }
.kc-filtros__lista a.kc-activo { background: var(--morado); color: var(--blanco); }
.kc-filtros__lista a.kc-activo span { opacity: .6; }
.kc-filtros__lista a span { opacity: .6; font-size: 12px; }

.kc-marcas { display: flex; flex-wrap: wrap; gap: 7px; }
.kc-marcas a {
  font-size: 12.5px; font-weight: 800; padding: 7px 12px; border-radius: 999px;
  border: 1.5px solid var(--borde-2); background: var(--blanco); color: var(--gris-4); transition: .15s;
}
.kc-marcas a:hover { border-color: var(--naranja); color: var(--naranja); }
.kc-marcas a.kc-activo { border-color: var(--naranja); background: var(--naranja); color: var(--blanco); }

.kc-rango { width: 100%; accent-color: var(--naranja); margin: 0; }
.kc-rango__pies { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--gris); margin-top: 2px; }
.kc-rango__pies strong { color: var(--morado); font-weight: 700; }

.kc-interruptor {
  display: flex; align-items: center; gap: 11px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--borde);
  cursor: pointer; color: inherit;
}
.kc-interruptor__perilla { width: 44px; height: 25px; border-radius: 999px; padding: 3px; transition: .15s; background: var(--borde-3); flex: none; }
.kc-interruptor__punto { width: 19px; height: 19px; border-radius: 50%; background: var(--blanco); transition: .15s; }
.kc-interruptor.kc-activo .kc-interruptor__perilla { background: var(--verde); }
.kc-interruptor.kc-activo .kc-interruptor__punto { transform: translateX(19px); }
.kc-interruptor span { font-weight: 700; font-size: 14px; color: var(--tinta); }

.kc-aviso { margin-top: 24px; background: var(--crema-2); border-radius: 16px; padding: 16px; }
.kc-aviso b { font-weight: 800; font-size: 14.5px; color: var(--morado); }
.kc-aviso p { font-size: 13px; color: var(--gris); line-height: 1.45; margin: 4px 0 0; }
.kc-aviso .kc-btn { margin-top: 11px; font-size: 13px; padding: 9px 16px; }

.kc-barra-orden {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 16px; padding: 12px 16px;
}
.kc-barra-orden__grupo { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.kc-barra-orden__rotulo { font-size: 13px; font-weight: 800; color: var(--gris-3); letter-spacing: .08em; }
.kc-ficha-orden {
  font-size: 13px; font-weight: 800; padding: 8px 14px; border-radius: 999px;
  background: var(--crema-4); color: var(--gris-4); transition: .15s;
}
.kc-ficha-orden:hover { background: var(--borde-2); color: var(--tinta); }
.kc-ficha-orden.kc-activo { background: var(--tinta); color: var(--blanco); }
.kc-barra-orden__conteo { font-size: 13.5px; font-weight: 700; color: var(--gris); }

.kc-vacio {
  background: var(--blanco); border: 1.5px dashed var(--borde-3); border-radius: var(--radio);
  padding: 56px; text-align: center; margin-top: 20px;
}
.kc-vacio b { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--tinta); }
.kc-vacio p { font-size: 15px; color: var(--gris); margin: 6px 0 0; }
.kc-vacio .kc-btn { margin-top: 18px; font-size: 14px; padding: 12px 24px; }

.kc-paginacion { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 34px; flex-wrap: wrap; }
.kc-paginacion a, .kc-paginacion span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 800; font-size: 14px;
  border: 1.5px solid var(--borde-2); background: var(--blanco); color: var(--gris-4);
}
.kc-paginacion a:hover { border-color: var(--naranja); color: var(--naranja); }
.kc-paginacion .kc-activo { background: var(--morado); border-color: var(--morado); color: var(--blanco); }
.kc-paginacion .kc-inerte { opacity: .45; }

/* ---------------------------------------------------------------------
   Ficha de producto
   --------------------------------------------------------------------- */
.kc-ficha { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; margin-top: 20px; align-items: start; }
.kc-ficha > div { min-width: 0; }
.kc-ficha__principal { height: 440px; background: var(--crema-3); border: 1.5px solid var(--borde); border-radius: 24px; overflow: hidden; }
.kc-ficha__miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.kc-ficha__miniatura { height: 92px; background: var(--crema-3); border: 1.5px solid var(--borde); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.kc-ficha__miniatura:hover, .kc-ficha__miniatura.kc-activo { border-color: var(--naranja); }

.kc-ficha__marca { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--gris-3); }
.kc-ficha h1 { font-size: 38px; line-height: 1.08; color: var(--tinta); margin: 6px 0 0; }
.kc-ficha__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.kc-ficha__estrellas { color: var(--naranja); font-size: 15px; letter-spacing: 1.5px; }
.kc-ficha__resenas { font-size: 13.5px; color: var(--gris); font-weight: 600; }
.kc-ficha__meta .kc-estado { margin-left: 0; font-size: 12px; padding: 4px 10px; }

.kc-ficha__precios { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.kc-ficha__precio { font-family: var(--display); font-weight: 800; font-size: 48px; color: var(--morado); line-height: 1; }
.kc-ficha__antes { font-size: 21px; color: var(--gris-3); text-decoration: line-through; font-weight: 700; }
.kc-ficha__ahorro { background: var(--rojo); color: var(--blanco); font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px; }

/* Simulador ----------------------------------------------------------- */
.kc-simulador { background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 20px; margin-top: 20px; }
.kc-simulador__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kc-simulador__top b { font-weight: 800; font-size: 15.5px; color: var(--tinta); }
.kc-conmutador { display: flex; gap: 4px; background: var(--crema-4); padding: 3px; border-radius: 999px; }
.kc-conmutador a { font-size: 12.5px; font-weight: 800; padding: 7px 14px; border-radius: 999px; color: var(--gris); }
.kc-conmutador a.kc-activo { background: var(--blanco); color: var(--morado); }
.kc-plazos { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kc-plazos a {
  flex: 1; min-width: 96px; text-align: center; font-size: 13.5px; font-weight: 800;
  padding: 10px; border-radius: 12px;
  border: 1.5px solid var(--borde-2); background: var(--blanco); color: var(--gris);
}
.kc-plazos a.kc-activo { border-color: var(--verde); background: #EDF7E8; color: var(--verde-osc); }
.kc-simulador__resultado {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--borde-2);
}
.kc-simulador__etiqueta { font-size: 13px; font-weight: 700; color: var(--gris); }
.kc-simulador__cuota { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--verde); line-height: 1.1; }
.kc-simulador__detalle { text-align: right; font-size: 13px; font-weight: 700; color: var(--gris); line-height: 1.6; }

/* El anzuelo: el formulario que engancha al simulador ------------------
   Va pegado a la caja del simulador (sin margen arriba y con la esquina
   superior recta) para que se lea como una sola pieza: la cuota y el
   campo donde se deja el teléfono. Separados, la persona lee la cuota y
   se va. */
.kc-anzuelo {
  background: var(--verde-suave); border: 1.5px solid #CFE4C4;
  border-radius: var(--radio); padding: 18px 20px; margin-top: 12px;
}
.kc-anzuelo__titulo { font-weight: 800; font-size: 15.5px; color: var(--verde-osc); }
.kc-anzuelo__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.kc-anzuelo .kc-campo { margin-top: 0; }
.kc-anzuelo .kc-campo input { background: var(--blanco); }
.kc-anzuelo .kc-campo input:focus { border-color: var(--verde); }
.kc-anzuelo__enviar { width: 100%; margin-top: 14px; font-size: 16px; padding: 15px 20px; }
.kc-anzuelo__letra { font-size: 12.5px; color: var(--gris); margin-top: 10px; font-weight: 600; line-height: 1.45; }
.kc-anzuelo__error {
  margin-top: 12px; background: #FDECEB; border: 1.5px solid #F3C4C2; border-radius: 12px;
  padding: 10px 12px; font-size: 13.5px; font-weight: 700; color: #A32A25;
}
.kc-anzuelo__ok b { display: block; font-weight: 800; font-size: 16px; color: var(--verde-osc); }
.kc-anzuelo__ok span { display: block; font-size: 14px; color: var(--texto); margin-top: 5px; font-weight: 600; line-height: 1.5; }

/* Artículo por debajo del monto mínimo de crédito */
.kc-simulador--contado { background: var(--crema-2); border-color: var(--borde-2); }
.kc-simulador--contado b { font-weight: 800; font-size: 15.5px; color: var(--morado); }
.kc-simulador--contado p { font-size: 14px; line-height: 1.5; color: var(--gris); margin: 6px 0 0; font-weight: 600; }

.kc-ficha__acciones { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.kc-ficha__acciones .kc-btn--naranja { flex: 1; min-width: 220px; font-size: 16px; padding: 17px 20px; box-shadow: 0 10px 24px rgba(255,158,22,.3); }
.kc-btn--contorno {
  border: 2px solid var(--borde-3); color: var(--tinta); background: transparent;
  font-size: 16px; padding: 15px 24px;
}
.kc-btn--contorno:hover { border-color: var(--morado); color: var(--morado); background: transparent; }

.kc-rotulo { font-weight: 800; font-size: 12px; letter-spacing: .12em; color: var(--gris-3); margin: 28px 0 10px; }
.kc-specs { background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 18px; overflow: hidden; }
.kc-specs div {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 13px 18px; border-bottom: 1px solid var(--crema-4); font-size: 14.5px;
}
.kc-specs div:last-child { border-bottom: none; }
.kc-specs dt, .kc-specs span:first-child { color: var(--gris); font-weight: 600; }
.kc-specs dd, .kc-specs span:last-child { color: var(--tinta); font-weight: 800; text-align: right; margin: 0; }

.kc-garantias { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.kc-garantias div { flex: 1; min-width: 200px; border-radius: 14px; padding: 13px 15px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.kc-garantias__marca { background: var(--crema-2); color: var(--morado); }
.kc-garantias__envio { background: var(--azul-suave); color: var(--azul-osc); }

/* Relacionados en columna izquierda ----------------------------------- */
.kc-relacionados-col { margin-top: 32px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; }
.kc-relacionados-col__encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.kc-relacionados-col__encabezado h3 { font-size: 22px; color: var(--tinta); margin: 0; font-family: var(--display); font-weight: 800; }
.kc-relacionados-col__flechas { display: flex; gap: 6px; }
.kc-carrusel-flecha {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--borde);
  background: var(--blanco); color: var(--tinta); font-size: 18px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: all .2s ease; line-height: 1; user-select: none;
}
.kc-carrusel-flecha:hover { border-color: var(--naranja); color: var(--naranja); background: var(--crema-2); transform: scale(1.06); }
.kc-carrusel-flecha:active { transform: scale(0.95); }

.kc-relacionados-col__escenario {
  overflow: hidden; position: relative; width: 100%; max-width: 100%; border-radius: var(--radio);
  padding: 4px 2px 14px;
}
.kc-relacionados-col__tira {
  display: flex; gap: 14px; width: max-content;
  animation: kc-marquee-col 28s linear infinite;
  will-change: transform;
}
.kc-relacionados-col__escenario:hover .kc-relacionados-col__tira,
.kc-relacionados-col__tira:hover {
  animation-play-state: paused;
}

@keyframes kc-marquee-col {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.kc-relacionado-col {
  width: 200px; flex-shrink: 0;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: border-color .2s, box-shadow .3s, transform .2s; color: inherit; display: block;
}
.kc-relacionado-col:hover { border-color: var(--naranja); box-shadow: 0 12px 24px rgba(46,27,44,.12); transform: translateY(-3px); color: inherit; }
.kc-relacionado-col__figura { height: 135px; background: var(--crema-3); }
.kc-relacionado-col__cuerpo { padding: 12px 14px 14px; }
.kc-relacionado-col__marca { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--gris-3); }
.kc-relacionado-col__nombre { font-weight: 700; font-size: 13.5px; line-height: 1.3; color: var(--tinta); margin-top: 4px; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-relacionado-col__precio { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--morado); margin-top: 6px; }

/* ---------------------------------------------------------------------
   Nosotros
   --------------------------------------------------------------------- */
.kc-nosotros-hero { background: var(--morado); color: var(--blanco); }
.kc-nosotros-hero .kc-contenedor {
  padding-top: 64px; padding-bottom: 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.kc-nosotros-hero__tag {
  display: inline-block; background: rgba(255,255,255,.16); color: #FFE9C7;
  font-weight: 800; font-size: 12.5px; letter-spacing: .12em; padding: 7px 15px; border-radius: 999px;
}
.kc-nosotros-hero h1 { font-size: 56px; line-height: 1.02; letter-spacing: -.025em; margin: 20px 0 0; }
.kc-nosotros-hero h1 em { color: var(--naranja); font-style: normal; }
.kc-nosotros-hero p { font-size: 18px; line-height: 1.6; color: #F1DCEE; margin: 20px 0 0; font-weight: 600; }
.kc-nosotros-hero__foto {
  height: 400px; overflow: hidden; background: var(--morado-2);
  clip-path: polygon(9% 0, 100% 0, 100% 89%, 91% 100%, 0 100%, 0 11%);
}

.kc-hitos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kc-hito { background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 24px 22px; }
.kc-hito b { display: block; font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--naranja); line-height: 1; }
.kc-hito strong { display: block; font-weight: 800; font-size: 16px; color: var(--tinta); margin-top: 6px; }
.kc-hito p { font-size: 14px; line-height: 1.5; color: var(--gris); margin: 6px 0 0; }

.kc-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.kc-mv__caja { border-radius: 24px; padding: 38px 36px; }
.kc-mv__caja--mision { background: var(--crema-2); }
.kc-mv__caja--vision { background: var(--azul-suave); }
.kc-mv__caja b { font-family: var(--display); font-weight: 800; font-size: 28px; }
.kc-mv__caja--mision b { color: var(--morado); }
.kc-mv__caja--vision b { color: var(--azul-osc); }
.kc-mv__caja p { font-size: 16.5px; line-height: 1.62; margin: 12px 0 0; font-weight: 600; }
.kc-mv__caja--mision p { color: var(--texto); }
.kc-mv__caja--vision p { color: #3A4A55; }

.kc-valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.kc-valor { border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 26px 24px; background: var(--blanco); }
.kc-valor__icono { width: 42px; height: 42px; border-radius: 14px; background: var(--crema-2); display: flex; align-items: center; justify-content: center; color: var(--morado); }
.kc-valor b { display: block; font-weight: 800; font-size: 17px; color: var(--tinta); margin-top: 14px; }
.kc-valor p { font-size: 14.5px; line-height: 1.5; color: var(--gris); margin: 6px 0 0; }

/* ---------------------------------------------------------------------
   Contacto
   --------------------------------------------------------------------- */
.kc-contacto { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; margin-top: 30px; align-items: start; }
.kc-formulario { background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 24px; padding: 30px; }
.kc-formulario h2 { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--tinta); }
.kc-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.kc-campo { margin-top: 14px; }
.kc-campos .kc-campo { margin-top: 0; }
.kc-campo label { display: block; font-size: 12.5px; font-weight: 800; color: var(--gris-3); letter-spacing: .08em; margin-bottom: 6px; }
.kc-campo input, .kc-campo textarea, .kc-campo select {
  width: 100%; border: 1.5px solid var(--borde-2); border-radius: 12px;
  padding: 12px 14px; font-size: 14.5px; outline: none; background: var(--crema); color: var(--tinta);
}
.kc-campo textarea { resize: vertical; min-height: 110px; }
.kc-campo input:focus, .kc-campo textarea:focus, .kc-campo select:focus { border-color: var(--naranja); }
.kc-formulario__pie { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.kc-formulario__pie .kc-btn--morado { font-size: 15px; padding: 14px 28px; }
.kc-formulario__pie a { font-weight: 800; font-size: 14.5px; color: var(--verde); }
.kc-trampa { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.kc-tiendas { display: grid; gap: 16px; }
.kc-tienda { background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio); padding: 22px 24px; }
.kc-tienda b { font-weight: 800; font-size: 17px; color: var(--morado); }
.kc-tienda__dir { font-size: 14.5px; color: var(--texto); font-weight: 600; margin-top: 5px; line-height: 1.45; }
.kc-tienda__hora { font-size: 13.5px; color: var(--gris); margin-top: 6px; }
.kc-tienda__tel { font-size: 13.5px; font-weight: 800; color: var(--tinta); margin-top: 4px; }
.kc-mapa { height: 210px; border-radius: var(--radio); overflow: hidden; border: 1.5px solid var(--borde); }

.kc-mensaje {
  border-radius: 16px; padding: 16px 20px; font-weight: 700; font-size: 15px;
  margin-bottom: 22px; border: 1.5px solid;
}
.kc-mensaje--ok { background: var(--verde-suave); border-color: #B7DCA6; color: var(--verde-osc); }
.kc-mensaje--error { background: #FDECEB; border-color: #F3BDBA; color: #B3312B; }

/* ---------------------------------------------------------------------
   Reservar en tienda

   Misma retícula que Contacto, pero la columna derecha es un resumen
   pegajoso: mientras se llena el formulario en el teléfono o en el
   escritorio, la persona tiene siempre a la vista QUÉ está reservando y
   a QUÉ precio. Es el precio que se le congela y el que va a reclamar.
   --------------------------------------------------------------------- */
.kc-campo__error { display: block; margin-top: 5px; color: #B3312B; font-weight: 700; font-size: 12.5px; }
.kc-campo__opt { font-weight: 600; letter-spacing: 0; color: var(--gris-2); }

.kc-reserva { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; margin-top: 30px; align-items: start; }

.kc-reserva__ficha {
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 24px;
  padding: 22px; position: sticky; top: 18px;
}
.kc-reserva__figura { height: 190px; border-radius: 16px; overflow: hidden; border: 1.5px solid var(--borde); }
.kc-reserva__marca { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--gris-3); margin-top: 16px; }
.kc-reserva__nombre { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--tinta); line-height: 1.2; margin-top: 4px; }
.kc-reserva__linea {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  font-size: 14.5px; font-weight: 700; color: var(--texto);
  padding: 10px 0; border-top: 1px dashed var(--borde-2); margin-top: 10px;
}
.kc-reserva__linea span:first-child { color: var(--gris); font-weight: 600; }
.kc-reserva__total { font-size: 16px; color: var(--tinta); }
.kc-reserva__total span:last-child { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--morado); }
.kc-reserva__nota { font-size: 13px; line-height: 1.5; color: var(--gris); margin: 12px 0 0; font-weight: 600; }

.kc-reserva__pagos { display: grid; gap: 10px; }
.kc-reserva__pago {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--borde-2); border-radius: 14px; padding: 13px 15px; background: var(--crema);
}
.kc-reserva__pago input { width: auto; margin-top: 3px; accent-color: var(--morado); }
.kc-reserva__pago b { display: block; font-weight: 800; font-size: 15px; color: var(--tinta); }
.kc-reserva__pago small { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; line-height: 1.4; }
.kc-reserva__pago.kc-activo { border-color: var(--morado); background: #FCF3FA; }
.kc-reserva__pago.kc-inerte { opacity: .55; cursor: not-allowed; }

.kc-reserva__credito {
  border: 1.5px solid var(--borde-2); border-radius: 16px; padding: 16px 18px;
  background: var(--crema-3); margin-top: 14px;
}
.kc-reserva__credito[hidden] { display: none; }
.kc-reserva__cuota {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--borde-3);
}

/* Confirmación */
.kc-gracias {
  max-width: 640px; margin: 20px auto 0; text-align: center;
  background: var(--blanco); border: 1.5px solid var(--borde); border-radius: 26px; padding: 40px 34px;
}
.kc-gracias__sello {
  width: 62px; height: 62px; margin: 0 auto; border-radius: 50%;
  background: var(--verde-suave); color: var(--verde-osc);
  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800;
}
.kc-gracias h1 { font-size: 32px; margin-top: 18px; }
.kc-gracias__numero {
  margin: 22px auto 0; border: 2px dashed var(--naranja); border-radius: 18px;
  padding: 16px 22px; background: var(--crema-2); display: inline-block;
}
.kc-gracias__numero span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--gris); }
.kc-gracias__numero b { font-family: var(--display); font-weight: 800; font-size: 34px; color: var(--morado); letter-spacing: .02em; }
.kc-gracias__texto { font-size: 15px; line-height: 1.6; color: var(--texto); margin: 18px 0 0; font-weight: 600; }
.kc-gracias__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */
.kc-pie { background: var(--tinta); color: #E9DCE7; }
.kc-pie__grid {
  max-width: var(--ancho); margin: 0 auto; padding: 56px 32px 28px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px;
}
.kc-pie p { font-size: 14.5px; line-height: 1.6; color: #B9A6B6; margin: 18px 0 0; max-width: 280px; }
.kc-pie__rotulo { font-weight: 800; font-size: 13px; letter-spacing: .12em; color: var(--naranja); }
.kc-pie__lista { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.kc-pie__lista a, .kc-pie__lista span { font-size: 14.5px; color: #CBBBC9; }
.kc-pie__lista a:hover { color: var(--naranja); }
.kc-pie__datos { font-size: 14.5px; color: #CBBBC9; line-height: 1.7; margin-top: 14px; }
.kc-pie__redes { display: flex; gap: 9px; margin-top: 20px; }
.kc-pie__redes a {
  width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px; color: var(--blanco);
}
.kc-pie__redes a:hover { background: var(--naranja); color: var(--tinta); }
.kc-pie__chatear { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; background: var(--naranja); color: var(--tinta); font-weight: 800; font-size: 14px; padding: 12px 22px; border-radius: 999px; }
.kc-pie__chatear:hover { color: var(--tinta); opacity: .9; }
.kc-pie__legal { border-top: 1px solid rgba(255,255,255,.1); }
.kc-pie__legal div {
  max-width: var(--ancho); margin: 0 auto; padding: 18px 32px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #8E7C8C;
}

/* ---------------------------------------------------------------------
   Botón flotante de WhatsApp
   --------------------------------------------------------------------- */
.kc-flotante {
  position: fixed; right: 26px; bottom: 26px; z-index: 80;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--whatsapp); color: var(--blanco);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,.4);
  transition: transform .25s cubic-bezier(.2,1.4,.4,1);
  animation: kcRing 2.6s ease-out 1.5s infinite;
}
.kc-flotante svg { width: 30px; height: 30px; }

/* Sólo escala. La guía de marca de WhatsApp no permite girar el logotipo,
   y el rótulo anterior lo inclinaba 6° al pasar el ratón. */
.kc-flotante:hover { transform: scale(1.1); color: var(--blanco); }

/* =====================================================================
   Puntos de quiebre
   ===================================================================== */

@media (max-width: 1180px) {
  .kc-hero h1 { font-size: 60px; }
  .kc-rejilla--4 { grid-template-columns: repeat(3, 1fr); }
  .kc-catalogo { grid-template-columns: 230px 1fr; gap: 22px; }
  .kc-buscador { width: 210px; }
  .kc-cabecera .kc-contenedor { gap: 18px; }
  .kc-nav a { padding: 9px 11px; font-size: 14px; }
}

@media (max-width: 980px) {
  .kc-contenedor, .kc-seccion, .kc-pagina, .kc-pie__grid, .kc-pie__legal div { padding-left: 20px; padding-right: 20px; }

  .kc-anuncios .kc-contenedor { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12px; }
  .kc-anuncios__grupo { gap: 10px; flex-wrap: wrap; }

  .kc-cabecera .kc-contenedor { flex-wrap: wrap; row-gap: 12px; }
  .kc-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .kc-nav::-webkit-scrollbar { height: 0; }
  .kc-buscador { flex: 1; width: auto; min-width: 160px; }

  .kc-hero .kc-contenedor { grid-template-columns: 1fr; gap: 34px; padding-top: 44px; padding-bottom: 48px; }
  .kc-hero h1 { font-size: 48px; }
  .kc-hero__bajada { font-size: 17px; }
  .kc-hero__foto { height: 320px; }
  .kc-hero__sello { width: 92px; height: 92px; }
  .kc-hero__sello b { font-size: 26px; }

  .kc-beneficios .kc-contenedor { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .kc-encabezado h2 { font-size: 32px; }
  .kc-categorias { grid-template-columns: repeat(2, 1fr); }
  .kc-rejilla--4, .kc-rejilla--3 { grid-template-columns: repeat(2, 1fr); }

  .kc-credito { grid-template-columns: 1fr; }
  .kc-credito__texto { padding: 36px 26px; }
  .kc-credito h2 { font-size: 32px; }
  .kc-credito__figura { min-height: 280px; }

  .kc-testimonios .kc-contenedor { grid-template-columns: 1fr; }

  .kc-catalogo { grid-template-columns: 1fr; }
  .kc-filtros { position: static; }

  .kc-ficha { grid-template-columns: 1fr; gap: 28px; }
  .kc-ficha__principal { height: 340px; }
  .kc-ficha h1 { font-size: 30px; }
  .kc-ficha__precio { font-size: 38px; }

  .kc-nosotros-hero .kc-contenedor { grid-template-columns: 1fr; gap: 30px; }
  .kc-nosotros-hero h1 { font-size: 40px; }
  .kc-nosotros-hero__foto { height: 280px; }
  .kc-hitos { grid-template-columns: repeat(2, 1fr); }
  .kc-mv, .kc-valores { grid-template-columns: 1fr; }
  .kc-contacto { grid-template-columns: 1fr; }
  /* En tablet el resumen deja de ser pegajoso y sube: si se queda
     flotando, tapa medio formulario al desplazarse. */
  .kc-reserva { grid-template-columns: 1fr; }
  .kc-reserva__ficha { position: static; order: -1; }

  .kc-pie__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 620px) {
  .kc-contenedor, .kc-seccion, .kc-pagina, .kc-pie__grid, .kc-pie__legal div { padding-left: 16px; padding-right: 16px; }

  .kc-anuncios { font-size: 11.5px; }
  .kc-cabecera .kc-contenedor { padding-top: 10px; padding-bottom: 10px; }
  .kc-logo span { font-size: 22px; }
  .kc-cabecera .kc-btn--naranja span:last-child { display: none; }
  .kc-cabecera .kc-btn--naranja { padding: 11px 14px; }

  .kc-hero h1 { font-size: 38px; }
  .kc-hero .kc-contenedor { padding-top: 34px; padding-bottom: 38px; }
  .kc-hero__foto { height: 240px; }
  .kc-hero__cifras { gap: 20px; }
  .kc-hero__cifra b { font-size: 26px; }
  .kc-btn--morado, .kc-btn--linea { font-size: 15px; padding: 14px 22px; }

  .kc-beneficios .kc-contenedor { grid-template-columns: 1fr; }
  .kc-seccion { padding-top: 44px; }
  .kc-encabezado h2 { font-size: 26px; }
  .kc-encabezado__enlace { font-size: 14px; }

  .kc-categorias { grid-template-columns: 1fr; }
  .kc-rejilla--4, .kc-rejilla--3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kc-producto__figura { height: 150px; }
  .kc-producto__cuerpo { padding: 12px 12px 14px; }
  .kc-producto__nombre { font-size: 13.5px; min-height: 36px; }
  .kc-producto__precio { font-size: 21px; }
  .kc-producto__antes { font-size: 13px; }
  .kc-estado { margin-left: 0; }

  .kc-pagina h1 { font-size: 30px; }
  .kc-ficha__principal { height: 260px; }
  .kc-ficha__miniaturas { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .kc-ficha__miniatura { height: 64px; }
  .kc-simulador__resultado { flex-direction: column; align-items: flex-start; }
  .kc-simulador__detalle { text-align: left; }
  /* A 375 px los dos campos en fila dejan cajas de 150 px: el teclado del
     teléfono tapa el error y el número no se lee entero. Uno debajo del otro. */
  .kc-anzuelo__campos { grid-template-columns: 1fr; }
  .kc-ficha__acciones .kc-btn { min-width: 100%; }

  .kc-campos { grid-template-columns: 1fr; }
  .kc-formulario { padding: 22px 18px; }
  .kc-vacio { padding: 34px 20px; }

  .kc-reserva__ficha { padding: 18px; }
  .kc-reserva__figura { height: 160px; }
  .kc-reserva__total span:last-child { font-size: 22px; }
  .kc-gracias { padding: 30px 20px; }
  .kc-gracias h1 { font-size: 26px; }
  .kc-gracias__numero b { font-size: 27px; }
  .kc-gracias__acciones .kc-btn { width: 100%; justify-content: center; }

  .kc-hitos { grid-template-columns: 1fr; }
  .kc-pie__grid { grid-template-columns: 1fr; }
  .kc-pie p { max-width: none; }

  .kc-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; }
  .kc-flotante svg { width: 27px; height: 27px; }
}

/* ---------------------------------------------------------------------
   «Consulte el precio»

   Lo que ocupa el sitio del precio cuando el dueño lo apaga para ese
   artículo. Hereda del precio de al lado —misma familia, mismo peso,
   mismo morado— pero un punto más pequeño: es una frase y no una cifra,
   y a 26 px compite con el nombre del producto.

   Si se pintara flojo o en gris, la tarjeta parecería a medio cargar.
   --------------------------------------------------------------------- */
.kc-producto__consulte {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  color: var(--morado);
  line-height: 1.15;
}
.kc-ficha__consulte {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  color: var(--morado);
  line-height: 1.1;
}
@media (max-width: 560px) {
  .kc-producto__consulte { font-size: 16px; }
  .kc-ficha__consulte    { font-size: 24px; }
}

/* =====================================================================
   12 bis · EL LOGOTIPO

   Una sola pieza para las cuatro caras del sistema: la cabecera del
   panel, la del sitio, el pie y la cotización que ve el cliente. El
   manual de marca prohíbe que el logo se vea distinto en dos sitios, y
   la única forma segura de cumplirlo es que sólo exista uno.

   ÁREA DE PROTECCIÓN. El manual (pág. 13) exige 1X libre alrededor,
   donde X es una medida del propio logo. Aquí se traduce a un relleno
   proporcional a su altura: se cumple a cualquier tamaño y sin que nadie
   tenga que acordarse.
   ===================================================================== */
.marca {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--marca-alto, 30px) * .18);
  line-height: 1;
}

.marca__img {
  display: block;
  height: var(--marca-alto, 30px);
  width: auto;
}

/* EL SUSTITUTO, mientras no estén los archivos oficiales.

   Se distingue del logotipo a propósito: no lleva el contenedor
   hexagonal ni la «k» con su curva. Es legible y respeta los colores,
   pero nadie lo va a confundir con el logo ni lo va a mandar a imprenta.

   El día que se coloquen `recursos/img/marca/kecasa.svg` y su versión
   blanca, esto deja de pintarse solo. */
.marca__texto {
  font-family: var(--ap-display, 'Montserrat', system-ui, sans-serif);
  font-size: calc(var(--marca-alto, 30px) * .78);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.marca__ke   { color: var(--ap-naranja, #f09d39); }
.marca__casa { color: var(--ap-crema, #FFFCF7); }

/* Sobre claro se invierten: el naranja sobre crema no se lee. */
.marca--claro .marca__ke   { color: var(--ap-morado, #9f2f6c); }
.marca--claro .marca__casa { color: var(--ap-morado, #9f2f6c); }
.marca--morado { color: inherit; }
/* El nombre para quien no ve el logotipo. Escondido a la manera
   accesible: un lector de pantalla lo lee, la vista no lo alcanza.
   Tiene clase propia y no la del panel porque este parcial se pinta
   también en el sitio, que no baja app.css. */
.marca__nombre {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* El propósito del manual, en Nuestra historia: una cita ancha entre la
   misión/visión y los valores. Todo con las variables de la casa. */
.kc-proposito {
  margin: 34px auto;
  max-width: 760px;
  padding: 22px 28px;
  border-left: 4px solid var(--naranja, #f09d39);
  background: var(--crema-2, #FFF3E0);
  border-radius: 14px;
}
.kc-proposito p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--morado);
  font-weight: 600;
}

/* El «texto para el sitio» del artículo, en su ficha. Prosa: ancho de
   lectura, no el de la columna de datos. */
.kc-ficha__descripcion {
  margin: 18px 0 6px;
  max-width: 62ch;
  line-height: 1.65;
  color: var(--gris-osc, #4b4550);
}

/* ── La señal del manual de marca (señalética) ──────────────────────
   Banda morada con el nombre en naranja y cuadro naranja con la flecha
   morada, como los letreros de sección de la tienda. El cuadro es más
   alto que la banda y asoma por arriba, igual que en el manual: por eso
   se alinean por abajo. Los rumbos giran una misma flecha. */
.kc-senal { display: inline-flex; align-items: flex-end; }
.kc-senal__banda {
  display: flex; align-items: center;
  background: var(--morado); color: var(--naranja);
  font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: .4px;
  height: 56px; padding: 0 26px;
}
.kc-senal__cuadro {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  background: var(--naranja); color: var(--morado);
  flex: none;
}
.kc-senal__cuadro svg { width: 34px; height: 34px; display: block; }
.kc-senal__cuadro--derecha   svg { transform: none; }
.kc-senal__cuadro--abajo     svg { transform: rotate(90deg); }
.kc-senal__cuadro--izquierda svg { transform: rotate(180deg); }
.kc-senal__cuadro--arriba    svg { transform: rotate(-90deg); }
.kc-senal__cuadro--noreste   svg { transform: rotate(-45deg); }
.kc-senal__cuadro--sureste   svg { transform: rotate(45deg); }

/* El título del catálogo hecho señal: el h1 no aporta caja propia. */
.kc-titulo-senal { margin: 14px 0 0; font-size: 0; line-height: 0; }

@media (max-width: 700px) {
  .kc-senal__banda  { height: 44px; font-size: 20px; padding: 0 18px; }
  .kc-senal__cuadro { width: 56px; height: 56px; }
  .kc-senal__cuadro svg { width: 26px; height: 26px; }
}