/* =========================================================================================
   KARA UI · rediseño de karaclinical.com (octubre 2026)
   -----------------------------------------------------------------------------------------
   Mismo lenguaje que «Análisis facial» (skin.karaclinical.com) y Kara Clinical Academy:
   blanco y papel cálido, estudio rosa en las fotos, titulares Noto Serif Display con la segunda
   parte en vino, numeración dorada, paneles rosa pálido y tarjetas de 20 px.
   Se carga después de webflow.shared.css y pulido.css. Todo cuelga de body.kui: quitar esa
   clase (o esta hoja) devuelve el sitio a como estaba. No toca lógica: carrito, PayPal, KCAN,
   Finsweet, geo-restricción y el puente al ERP siguen en el HTML intacto.
   ========================================================================================= */

/* ---------- 1. Tokens ---------- */
.kui {
  --k-tinta: #260514; --k-texto: #2a1a21; --k-suave: #6d5a62; --k-marca: #5b0c2f; --k-marca-viva: #3d0820;
  --k-rosa: #e5bcba; --k-estudio: #efc8c6; --k-rosa-claro: #f8eeee; --k-panel: #f8f1f1; --k-papel: #fbf7f5;
  --k-oro: #9c7433; --k-filete: #ede3e5; --k-filete-rosa: #e6cccb; --k-plato: #f3e9e8;
  --k-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --k-letra: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --k-t-micro: .6875rem; --k-t-ficha: .8125rem; --k-t-pie: .9375rem; --k-t-cuerpo: 1.0625rem;
  --k-t-guia: clamp(1.0625rem, 1.4vw, 1.25rem);
  --k-t-h1: clamp(2.6rem, 5.4vw, 4.6rem); --k-t-h2: clamp(2.1rem, 4.2vw, 3.4rem); --k-t-h3: clamp(1.35rem, 2vw, 1.7rem);
  --k-ancho: 1240px; --k-margen: clamp(1.25rem, 5vw, 3.5rem); --k-paso: clamp(4rem, 8vw, 7.5rem);
  --k-r: 20px; --k-r-foto: 22px; --k-pildora: 100px;
  --k-curva: cubic-bezier(.16, 1, .3, 1);
  --k-sombra: 0 1px 2px rgba(38,5,20,.04), 0 30px 60px -34px rgba(38,5,20,.30);
  background-color: #fff; color: var(--k-texto); font-family: var(--k-letra);
}
.kui ::selection { background: var(--k-rosa); color: var(--k-tinta); }

/* ---------- 2. Retícula ---------- */
.kui .main-container { max-width: calc(var(--k-ancho) + 2 * var(--k-margen)); padding-left: var(--k-margen); padding-right: var(--k-margen); }
.kui .section, .kui .section.overflow-hidden { padding-top: var(--k-paso); padding-bottom: var(--k-paso); }
.kui .section.background-color-pink, .kui .section.pink-color, .kui .section.secondary-color { background-image: none; background-color: var(--k-papel); }
.kui .section.border-botton-1px, .kui .bottom-border-1px { border-bottom: 0; }

/* ---------- 3. Tipografía ---------- */
.kui .h1, .kui .h2, .kui .h3, .kui .paragraph-2 { font-family: var(--k-display); font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.kui .h1 { font-size: var(--k-t-h1); line-height: 1.02; color: var(--k-tinta); }
.kui .h2 { font-size: var(--k-t-h2); line-height: 1.06; }
.kui .h2.heading-color, .kui .heading-color { color: var(--k-tinta); }
.kui .h3.headind-color { font-size: var(--k-t-h2); line-height: 1.06; color: var(--k-tinta); }
.kui .kui-acento { color: var(--k-marca); }
.kui .paragraph-lg { font-size: var(--k-t-guia); line-height: 1.55; color: var(--k-texto); text-wrap: pretty; }
.kui .paragraph-md { font-size: var(--k-t-cuerpo); line-height: 1.62; color: var(--k-texto); text-wrap: pretty; }
.kui .subheading { display: inline-flex; align-items: center; gap: .75rem; font-family: var(--k-letra); font-size: var(--k-t-micro);
  font-weight: 500; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--k-suave); }
.kui .subheading::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: var(--k-oro); }
.kui .subheading.text-align-center { justify-content: flex-start; text-align: left; }

/* Numeración dorada de las secciones de la portada (como «01», «02» en Análisis facial) */
.kui:has(.kp-skin) .bestseller-slider_component,
.kui:has(.kp-skin) .testimonios-slider_component { position: relative; }
.kui:has(.kp-skin) .section.overflow-hidden .div-block-22 .h2::before,
.kui .kp-skin_texto::before,
.kui .kp-pro_cab > div:first-child::before,
.kui:has(.kp-skin) .hero-split-2::before,
.kui:has(.kp-skin) .h2.margin-bottom_lg::before {
  display: block; margin-bottom: 1rem; font-family: var(--k-display); font-size: 1.35rem; line-height: 1; letter-spacing: 0; color: var(--k-oro);
}
.kui:has(.kp-skin) .section.overflow-hidden .div-block-22 .h2::before { content: "01"; }
.kui .kp-skin_texto::before { content: "02"; }
.kui .kp-pro_cab > div:first-child::before { content: "03"; }
.kui:has(.kp-skin) .hero-split-2::before { content: "04"; }
.kui:has(.kp-skin) .h2.margin-bottom_lg::before { content: "05"; }

/* ---------- 4. Botones ---------- */
.kui .button_md, .kui .w-button.button_md {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: 14px 30px;
  border-radius: var(--k-pildora); background-color: var(--k-marca); color: #fff;
  font-family: var(--k-letra); font-size: var(--k-t-pie); font-weight: 500; letter-spacing: .01em; line-height: 1.2;
}
.kui .button_md:hover { background-color: var(--k-marca-viva); }
.kui .link-button { gap: .5rem; color: var(--k-marca); font-size: var(--k-t-pie); font-weight: 500; }
.kui .link-button:hover { text-decoration: none; }
.kui .link-button .link-tbutton_text { margin: 0; font-size: inherit; font-weight: inherit; text-decoration: underline;
  text-decoration-color: var(--k-filete-rosa); text-underline-offset: 6px; }
.kui .link-button:hover .link-tbutton_text { text-decoration-color: currentColor; }

/* ---------- 5. Barra superior y menú ---------- */
.kui .top-bar { background-color: var(--k-tinta); padding-top: .55rem; padding-bottom: .55rem; }
.kui .top-bar a, .kui .top-bar .link { color: #f3dede; font-size: var(--k-t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.kui .navbar { border-bottom: 1px solid rgba(38,5,20,.08); }
.kui .navbar.background-white, .kui .navbar.white-background { background-color: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.kui .navbar.kp-pegada { background-color: rgba(255,255,255,.9); box-shadow: 0 1px 0 var(--k-filete); }
.kui .navbar_nav-link, .kui .navbar_dropdown-toggle .text-block-3 { font-size: 14px; color: var(--k-texto); }
.kui .navbar_nav-link.w--current { color: var(--k-marca); }
.kui .navbar_dropwdown_navigation.w--open { background-color: #fff; }
.kui .cart-counter { background-color: var(--k-marca); color: #fff; font-weight: 600; }

/* ---------- 6. Portada: carrusel en estudio rosa ---------- */
.kui .hero-slider.desktop { min-height: clamp(600px, 88vh, 820px); }
.kui .hero-slider.desktop .w-slider-mask, .kui .hero-slider.desktop .hero-slider_slide { min-height: inherit; }
.kui .hero-slider.desktop .hero-slider_slide {
  --s: #efc8c6;
  background: linear-gradient(90deg, #efc8c6 0%, #efc8c6 36%, rgba(239,200,198,0) 58%),
              url("/nuevo/img/portada/rfusion-1400.webp?v=20261017i") right bottom / auto 100% no-repeat, #efc8c6;
  background: linear-gradient(90deg, #efc8c6 0%, #efc8c6 36%, rgba(239,200,198,0) 58%),
              image-set(url("/nuevo/img/portada/rfusion-1400.webp?v=20261017i") 1x, url("/nuevo/img/portada/rfusion-2000.webp?v=20261017i") 2x) right bottom / auto 100% no-repeat, #efc8c6;
}
.kui .hero-slider.desktop .hero-slider_slide.slide-n2 {
  background: linear-gradient(90deg, #e298a8 0%, #e298a8 36%, rgba(226,152,168,0) 58%),
              url("/nuevo/img/portada/auren-1400.webp?v=20261017i") right bottom / auto 100% no-repeat, #e298a8;
  background: linear-gradient(90deg, #e298a8 0%, #e298a8 36%, rgba(226,152,168,0) 58%),
              image-set(url("/nuevo/img/portada/auren-1400.webp?v=20261017i") 1x, url("/nuevo/img/portada/auren-2000.webp?v=20261017i") 2x) right bottom / auto 100% no-repeat, #e298a8;
}
.kui .hero-slider.desktop .hero-slider_slide.slide-n3 {
  background: linear-gradient(90deg, #f4f3f1 0%, #f4f3f1 38%, rgba(244,243,241,0) 60%),
              url("/nuevo/img/portada/colageno-1400.webp?v=20261017i") right bottom / auto 100% no-repeat, #f4f3f1;
  background: linear-gradient(90deg, #f4f3f1 0%, #f4f3f1 38%, rgba(244,243,241,0) 60%),
              image-set(url("/nuevo/img/portada/colageno-1400.webp?v=20261017i") 1x, url("/nuevo/img/portada/colageno-2000.webp?v=20261017i") 2x) right bottom / auto 100% no-repeat, #f4f3f1;
}
.kui .hero-section_text_wrapper.margin-top-xlarge { gap: 1.4rem; max-width: 34rem; }
.kui .hero-section_text_wrapper .h1 { max-width: 11ch; }
.kui .hero-section_text_wrapper .paragraph-lg { max-width: 28rem; color: var(--k-texto); }
.kui .hero-slider .w-slider-arrow-left, .kui .hero-slider .w-slider-arrow-right {
  width: 50px; height: 50px; top: auto; bottom: 32px; margin: 0; border-radius: 50%;
  background: rgba(255,255,255,.75); color: var(--k-tinta); font-size: 16px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.kui .hero-slider .w-slider-arrow-left { left: auto; right: calc(var(--k-margen) + 62px); }
.kui .hero-slider .w-slider-arrow-right { right: var(--k-margen); }
.kui .hero-slider .w-slider-nav { left: max(var(--k-margen), calc((100% - var(--k-ancho)) / 2)); right: auto; width: auto; bottom: 40px; padding: 0; text-align: left; }
.kui .hero-slider .w-slider-dot { width: 22px; height: 3px; margin: 0 5px 0 0; border-radius: 2px; background: rgba(38,5,20,.22); }
.kui .hero-slider .w-slider-dot.w-active { width: 44px; background: var(--k-marca); }
/* Carrusel móvil: misma foto, abajo, con el rosa fundido arriba */
.kui .hero-slider.mobile .hero-slider_slide {
  background: linear-gradient(180deg, #efc8c6 0%, #efc8c6 40%, rgba(239,200,198,0) 62%),
              url("/nuevo/img/portada/rfusion-800.webp?v=20261017i") center bottom / 100% auto no-repeat, #efc8c6;
  background: linear-gradient(180deg, #efc8c6 0%, #efc8c6 40%, rgba(239,200,198,0) 62%),
              image-set(url("/nuevo/img/portada/rfusion-800.webp?v=20261017i") 1x, url("/nuevo/img/portada/rfusion-1400.webp?v=20261017i") 2x) center bottom / 100% auto no-repeat, #efc8c6;
}
.kui .hero-slider.mobile .hero-slider_slide.slide-n2 {
  background: linear-gradient(180deg, #e298a8 0%, #e298a8 40%, rgba(226,152,168,0) 62%),
              url("/nuevo/img/portada/auren-800.webp?v=20261017i") center bottom / 100% auto no-repeat, #e298a8;
  background: linear-gradient(180deg, #e298a8 0%, #e298a8 40%, rgba(226,152,168,0) 62%),
              image-set(url("/nuevo/img/portada/auren-800.webp?v=20261017i") 1x, url("/nuevo/img/portada/auren-1400.webp?v=20261017i") 2x) center bottom / 100% auto no-repeat, #e298a8;
}
.kui .hero-slider.mobile .hero-slider_slide.slide-n3 {
  background: linear-gradient(180deg, #f4f3f1 0%, #f4f3f1 40%, rgba(244,243,241,0) 62%),
              url("/nuevo/img/portada/colageno-800.webp?v=20261017i") center bottom / 100% auto no-repeat, #f4f3f1;
  background: linear-gradient(180deg, #f4f3f1 0%, #f4f3f1 40%, rgba(244,243,241,0) 62%),
              image-set(url("/nuevo/img/portada/colageno-800.webp?v=20261017i") 1x, url("/nuevo/img/portada/colageno-1400.webp?v=20261017i") 2x) center bottom / 100% auto no-repeat, #f4f3f1;
}
.kui .hero-slider.mobile .h1, .kui .hero-slider .mobile-color { color: var(--k-tinta); }

/* ---------- 7. Encabezados de sección y de colección ---------- */
.kui .div-block-22.margin-bottom-lg { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.kui .section.collection-header { display: block; background: var(--k-panel); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.kui .section.collection-header .h3, .kui .section.collection-header .h1 { text-align: left; font-size: var(--k-t-h1); line-height: 1.02; }
.kui .section.collection-header + .section.padding-top-small { padding-top: clamp(2rem, 4vw, 3rem); }

@media screen and (min-width: 768px) { .kui .div-block-22.margin-bottom-lg { align-items: flex-end; } }

/* ---------- 8. Tarjeta de producto ---------- */
.kui .product_card { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.kui .product-image-wrapper {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--k-r-foto);
  overflow: hidden; background-color: var(--k-plato); isolation: isolate;
}
.kui .product-image-wrapper .kui-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .55s var(--k-curva), transform 1.2s var(--k-curva); }
.kui .product-image-wrapper .kui-producto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; opacity: 0; transform: scale(1.04); transition: opacity .55s var(--k-curva), transform 1.2s var(--k-curva); }
@media (hover: hover) and (pointer: fine) {
  .kui .product_card:hover .kui-foto { opacity: 0; transform: scale(1.03); }
  .kui .product_card:hover .kui-producto { opacity: 1; transform: none; }
}
.kui .product_card .product-card_image:not(.kui-producto) { width: 100%; height: 100%; object-fit: cover; }
.kui .product-card_descripcion-corta, .kui .product-card_descripcion-corta.subheading-color {
  order: 1; margin: 1.1rem 0 0; font-size: var(--k-t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--k-oro);
}
.kui .product-card_name_link { order: 2; text-decoration: none; }
.kui .product-card_name, .kui .product-card_name.heading-color {
  margin: .45rem 0 0; font-family: var(--k-display); font-size: clamp(1.15rem, 1.45vw, 1.35rem); font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em; color: var(--k-tinta); text-wrap: balance; transition: color .2s;
}
.kui .product_card:hover .product-card_name { color: var(--k-marca); }
.kui .product-card_price-wrapper { order: 3; display: flex; align-items: baseline; gap: .6rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--k-filete); }
.kui .product-card_price { font-family: var(--k-letra); font-size: var(--k-t-pie); font-weight: 500; color: var(--k-tinta); font-variant-numeric: tabular-nums; }
.kui .product-card_price.dashed-text { font-size: var(--k-t-ficha); font-weight: 400; color: var(--k-suave); opacity: .8; }
.kui .product-card_tag { order: 4; }
.kui .product_card .paragraph-6 { order: 5; }
.kui .product-grid { column-gap: clamp(1rem, 2vw, 1.75rem); row-gap: clamp(2.5rem, 4.5vw, 4rem); }
.kui .products-count { font-size: var(--k-t-ficha); color: var(--k-suave); }
.kui .accordion-filter { border-bottom-color: var(--k-filete); }
.kui .accordion-filter_header_title, .kui .filter-dropdown_text { font-size: 14px; font-weight: 500; color: var(--k-tinta); }
.kui .bestseller-slider_button_element, .kui .testimonios-slider_button_element { width: 50px; height: 50px; border: 1px solid var(--k-filete-rosa); border-radius: 50%; background: #fff; }

/* ---------- 9. Ficha de producto ---------- */
.kui .product-info { background: #fff; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.kui .breadcrumb-wrapper { margin-bottom: 1.75rem; font-size: var(--k-t-ficha); color: var(--k-suave); }
.kui .breadcrumb-wrapper a, .kui .breadcrumb-wrapper .text-block-9 { color: var(--k-suave); text-decoration: none; }
.kui .div-block-50 { gap: clamp(2rem, 5vw, 4.5rem); align-items: flex-start; }
/* Galería: foto grande arriba y miniaturas debajo (mismo script de Webflow, solo cambia el orden visual) */
.kui .gallery-main-wrapper { flex: 1 1 0; max-width: 56%; min-width: 0; flex-direction: column; gap: .9rem; }
.kui .main-image-wrapper { order: -1; width: 100%; border-radius: 26px; overflow: hidden; background: var(--k-plato); aspect-ratio: 4 / 5; }
.kui .image-10 { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.kui .thumbs-column { width: 100%; }
.kui .collection-list-4 { display: flex; flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.kui .collection-list-4 > .w-dyn-item { flex: 0 0 72px; }
.kui .gallery-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1.5px solid transparent; border-radius: 12px; background: var(--k-plato); }
.kui .product-content { flex: 0 1 40%; max-width: 32rem; gap: 1.25rem; position: sticky; top: 110px; }
.kui .product-content > .h2 { font-size: clamp(2.1rem, 3.5vw, 3rem); line-height: 1.04; }
.kui .price-info { gap: .9rem; }
.kui .current-price, .kui .heading-18 { font-family: var(--k-display); font-size: 1.9rem; font-weight: 400; color: var(--k-tinta); font-variant-numeric: tabular-nums; }
.kui .old-price { font-size: 1.05rem; color: var(--k-suave); opacity: .75; }
.kui .product-content > .paragraph-md { color: var(--k-texto); }
.kui .div-block-39 { flex-wrap: wrap; gap: .75rem; padding: 1.25rem; border-radius: var(--k-r); background: var(--k-panel); }
.kui .div-block-39 > .width-100 { flex: 1 1 12rem; }
.kui .div-block-39 .button_md { white-space: nowrap; }
.kui .text-block-8 { font-size: var(--k-t-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--k-suave); }
.kui .accordion { border-bottom-color: var(--k-filete); }
.kui .accordion-header_title { font-size: var(--k-t-pie); font-weight: 500; color: var(--k-tinta); }
.kui .accordion_panel li, .kui .accordion_panel p { font-size: var(--k-t-pie); line-height: 1.62; color: var(--k-texto); }
/* Preguntas frecuentes de la ficha, sobre papel */
.kui .product-info + .section { background: var(--k-papel); }
.kui .center-flex > .h3.headind-color { font-size: var(--k-t-h2); }

/* ---------- 10. Testimonios: paneles rosa pálido ---------- */
.kui .card { border: 0; border-radius: var(--k-r); background: var(--k-panel); padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.kui .card .image-3 { filter: sepia(1) saturate(1.1) hue-rotate(-12deg) brightness(.72); }

/* ---------- 11. Cita sobre video ---------- */
.kui .background-video::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(38,5,20,.66) 0%, rgba(38,5,20,.3) 48%, rgba(38,5,20,0) 78%); }
.kui .background-video .main-container { position: relative; z-index: 2; }
.kui .paragraph-2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.16; max-width: 20ch; }
.kui .heading-8 { font-family: var(--k-letra); font-size: var(--k-t-ficha); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }

/* ---------- 12. «Conoce nuestra historia» ---------- */
.kui .hero-wrapper-2 { gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.kui .hero-split-2 { align-items: flex-start; text-align: left; width: 40%; }
.kui .hero-split-2 .text-align-center, .kui .hero-split-2 .text-align_center { text-align: left; }
.kui .hero-split-2 .paragraph-md { width: auto; max-width: 26rem; }
.kui .div-block-20 { border-radius: 26px; overflow: hidden; }
.kui .shadow-two-2 { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 58%; border-radius: 26px; box-shadow: none; }

/* ---------- 13. Formularios ---------- */
.kui .form_text-field, .kui .text-field, .kui .text-field-2 {
  min-height: 50px; padding: 12px 16px; border: 1px solid var(--k-filete-rosa); border-radius: 14px;
  background-color: #fff; color: var(--k-tinta); font-size: 16px; transition: border-color .2s, box-shadow .2s;
}
.kui .form_text-field:focus, .kui .text-field:focus, .kui .text-field-2:focus { border-color: var(--k-marca); box-shadow: 0 0 0 3px rgba(91,12,47,.12); outline: none; }
.kui .form_text-field_label { font-size: var(--k-t-ficha); font-weight: 500; color: var(--k-texto); }

/* Contacto: el formulario va en un panel rosa pálido, como los de Análisis facial */
.kui .form-container { border: 0; border-radius: 26px; background: var(--k-panel); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: none; }
.kui .form-container .button_md { width: 100%; }

/* ---------- 14. Pie ---------- */
.kui .footer { background-color: #fff; border-top: 1px solid var(--k-filete); }
.kui .footer.checkout { background-color: transparent; }
.kui .footer-link-heading { font-size: var(--k-t-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--k-oro); }
.kui .footer-link { font-size: 14px; color: var(--k-texto); }
.kui .footer .paragraph-md { max-width: 30rem; font-size: var(--k-t-pie); color: var(--k-suave); }
.kui .div-block-17 { border-top-color: var(--k-filete); }
.kui .heading-10 { font-size: var(--k-t-ficha); font-weight: 400; color: var(--k-suave); }

/* ---------- 15. Tableta y móvil ---------- */
@media screen and (max-width: 991px) {
  .kui .hero-split-2 { width: 100%; }
  .kui .gallery-main-wrapper { max-width: 100%; width: 100%; }
  .kui .product-content { position: static; max-width: none; }
  .kui .thumbs-column { width: 100%; }
  .kui .collection-list-4 { flex-wrap: nowrap; overflow-x: auto; gap: .5rem; padding-bottom: .25rem; scrollbar-width: none; }
  .kui .collection-list-4 > .w-dyn-item { flex: 0 0 64px; }
}
@media screen and (max-width: 767px) {
  .kui .hero-slider .w-slider-arrow-left, .kui .hero-slider .w-slider-arrow-right { display: none; }
  .kui .hero-slider .w-slider-nav { bottom: 22px; }
  .kui .hero-section_text_wrapper.margin-top-xlarge { margin-top: 96px; }
  .kui .product-grid { column-gap: .875rem; row-gap: 2.25rem; }
  .kui .product-card_name, .kui .product-card_name.heading-color { font-size: 1.05rem; }
  .kui .product-card_descripcion-corta { margin-top: .8rem; font-size: .625rem; }
  .kui .div-block-39 { padding: 1rem; }
  .kui .background-video::after { background: linear-gradient(0deg, rgba(38,5,20,.74) 0%, rgba(38,5,20,.25) 62%, rgba(38,5,20,0) 100%); }
  .kui .main-image-wrapper { border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kui .product-image-wrapper .kui-foto, .kui .product-image-wrapper .kui-producto { transition: none; }
}

/* ---------- Sobre nosotros: fundadores sobre estudio rosa ---------- */
.kui .image-16 { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 26px; box-shadow: none; }

/* ---------- Portada: diapositiva de La Hora K (estreno 17-oct) ---------- */
.kui .hero-slider.desktop .hero-slider_slide.slide-horak {
  background: linear-gradient(90deg, #2a0718 0%, #2a0718 34%, rgba(42,7,24,0) 58%),
              url("/nuevo/img/horak/horak-1400.webp?v=20261017m") right center / auto 100% no-repeat, #2a0718;
  background: linear-gradient(90deg, #2a0718 0%, #2a0718 34%, rgba(42,7,24,0) 58%),
              image-set(url("/nuevo/img/horak/horak-1400.webp?v=20261017m") 1x, url("/nuevo/img/horak/horak-2000.webp?v=20261017m") 2x) right center / auto 100% no-repeat, #2a0718;
}
.kui .hero-slider.mobile .hero-slider_slide.slide-horak {
  background: linear-gradient(180deg, #2a0718 0%, #2a0718 46%, rgba(42,7,24,0) 66%),
              url("/nuevo/img/horak/horak-800.webp?v=20261017m") center bottom / 100% auto no-repeat, #2a0718;
  background: linear-gradient(180deg, #2a0718 0%, #2a0718 46%, rgba(42,7,24,0) 66%),
              image-set(url("/nuevo/img/horak/horak-800.webp?v=20261017m") 1x, url("/nuevo/img/horak/horak-1400.webp?v=20261017m") 2x) center bottom / 100% auto no-repeat, #2a0718;
}
.kui .hero-slider .slide-horak .h1 { color: #fbf3f5; }
.kui .hero-slider .slide-horak .kui-acento { color: #f4a9c0; }
.kui .hero-slider .slide-horak .hero-section_text_wrapper .paragraph-lg { color: rgba(251,243,245,.82); margin-bottom: 0; }
.kui .slide-horak .kui-horak-ko { margin: 0; font-size: var(--k-t-ficha); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #f4a9c0; }
.kui .slide-horak .kui-horak-fecha { margin: 0 0 .4rem; padding-top: 1rem; border-top: 1px solid rgba(201,166,107,.55); font-size: var(--k-t-ficha); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c9a66b; max-width: 36rem; }
.kui .hero-slider .slide-horak .button_md { background-color: #fbf3f5; color: var(--k-marca-viva); }
.kui .hero-slider .slide-horak .button_md:hover { background-color: #f4a9c0; color: var(--k-tinta); }
/* puntos del carrusel visibles mientras se ve la diapositiva oscura */
.kui .hero-slider:has(.slide-horak:not([aria-hidden="true"])) .w-slider-dot { background: rgba(251,243,245,.35); }
.kui .hero-slider:has(.slide-horak:not([aria-hidden="true"])) .w-slider-dot.w-active { background: #f4a9c0; }
/* el menú de la portada es translúcido: sobre la diapositiva oscura pasa a papel opaco para leerse */
.kui .navbar.w-nav { transition: background-color .4s ease; }
@media (min-width: 768px) {
  .kui:has(.hero-slider.desktop .slide-horak:not([aria-hidden="true"])) .navbar.w-nav { background-color: rgba(251,247,245,.97) !important; }
}
@media (max-width: 767px) {
  .kui:has(.hero-slider.mobile .slide-horak:not([aria-hidden="true"])) .navbar.w-nav { background-color: rgba(251,247,245,.97) !important; }
}