/* Pulido de karaclinical.com (074). Se carga DESPUÉS del CSS de Webflow y solo afina: no cambia
   el diseño, los colores ni la estructura del sitio original. Paul, 7-oct-2026: «usa la página
   original, solo dale tus toques para que quede mejor, más profesional». Movimiento sutil. */

:root {
  --kp-vino: #5b0c2f; --kp-vino-os: #3d0820; --kp-tinto: #260514; --kp-rosa: #ffeef2; --kp-rosa-acento: #f4a9c0;
  --kp-borde: #ebe1e4; --kp-suave: cubic-bezier(.215,.61,.355,1); --kp-entrada: cubic-bezier(.16,1,.3,1);
  --kp-sombra: 0 1px 2px rgba(38,5,20,.05), 0 24px 48px -24px rgba(38,5,20,.22);
}
::selection { background: var(--kp-rosa-acento); color: var(--kp-tinto); }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--kp-vino); outline-offset: 3px; }

/* ---------- Tipografía: titulares más finos ---------- */
.h1, .h2, .heading-8 { letter-spacing: -.02em; text-wrap: balance; }
.paragraph-lg, .paragraph-md { text-wrap: pretty; }

/* ---------- Barra superior ---------- */
.top-bar .link { transition: opacity .2s var(--kp-suave); }
.top-bar .link:hover { opacity: .75; }

/* ---------- Menú ---------- */
.navbar { transition: background-color .35s var(--kp-suave), box-shadow .35s var(--kp-suave), border-color .35s var(--kp-suave); }
.navbar.kp-pegada { background-color: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: transparent; box-shadow: 0 1px 0 var(--kp-borde), 0 12px 32px -24px rgba(38,5,20,.25); }
@media screen and (min-width: 992px) {
  .navbar_nav-link, .navbar_dropdown-toggle .text-block-3 { position: relative; }
  .navbar_nav-link::after, .navbar_dropdown-toggle .text-block-3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--kp-entrada); }
  .navbar_dropdown-toggle .text-block-3::after { bottom: -6px; }
  .navbar_nav-link:hover::after, .navbar_nav-link.w--current::after, .navbar_dropdown:hover .text-block-3::after { transform: scaleX(1); transform-origin: left; }
  .navbar_dropwdown_navigation.w--open { border-radius: 16px; box-shadow: var(--kp-sombra); padding: 8px; border: 1px solid var(--kp-borde);
    animation: kp-baja .3s var(--kp-entrada); overflow: hidden; }
  .navbar_dropdown_navigation_link { border-radius: 10px; transition: background-color .2s var(--kp-suave), color .2s var(--kp-suave); }
  .navbar_dropdown_navigation_link:hover { background-color: var(--kp-rosa); color: var(--kp-vino); }
}
@keyframes kp-baja { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Desplegable «Profesionales» (nuevo): cada opción con su explicación debajo */
.kp-opcion { display: block !important; white-space: normal; min-width: 280px; }
.kp-opcion small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; font-weight: 400; color: #7e6a73; }
.kp-opcion--discreta { font-size: 14px !important; color: #7e6a73 !important; border-top: 1px solid var(--kp-borde); margin-top: 4px; border-radius: 0 0 10px 10px !important; }

/* ---------- Botones ---------- */
.button_md, .w-button { transition: background-color .3s var(--kp-suave), transform .3s var(--kp-suave), box-shadow .3s var(--kp-suave); }
.button_md:hover { background-color: var(--kp-vino-os); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(91,12,47,.55); }
.button_md:active { transform: translateY(0); }

/* ---------- Tarjetas de producto ---------- */
.product-image-wrapper { overflow: hidden; }
.product-card_image { transition: transform .9s var(--kp-entrada); }
.product_card:hover .product-card_image { transform: scale(1.05); }
.product-card_name { transition: color .2s var(--kp-suave); }
.product_card:hover .product-card_name { color: var(--kp-vino); }
.product-card_price { font-variant-numeric: tabular-nums; }
.bestseller-slider_button_element, .testimonios-slider_button_element { transition: transform .3s var(--kp-suave), background-color .3s var(--kp-suave), opacity .3s; }
.bestseller-slider_button_element:hover, .testimonios-slider_button_element:hover { transform: scale(1.08); }

/* ---------- Testimonios ---------- */
.testimonios-slider_cms_item .card { transition: transform .45s var(--kp-entrada), box-shadow .45s var(--kp-entrada); }
.testimonios-slider_cms_item .card:hover { transform: translateY(-4px); box-shadow: var(--kp-sombra); }

/* ---------- Historia y pie ---------- */
.shadow-two-2 { transition: transform 1.2s var(--kp-entrada); }
.div-block-20 { overflow: hidden; }
.div-block-20:hover .shadow-two-2 { transform: scale(1.03); }
.footer-link { transition: color .2s var(--kp-suave); }
.footer-link:hover { color: var(--kp-vino); }
.social-icon { transition: transform .3s var(--kp-suave); }
.social-icon:hover { transform: scale(1.12); }
/* Pie: la columna nueva «Explora» va al lado de las otras dos (en español hay tres columnas) */
@media screen and (min-width: 480px) { .footer .div-block-13:has(> .div-block-14:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Aparición suave al bajar (solo con JS y si la persona no pidió menos movimiento) ---------- */
html.kp-js .kp-aparece { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--kp-entrada), transform 1.1s var(--kp-entrada); transition-delay: var(--kp-retraso, 0s); }
html.kp-js .kp-aparece.kp-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.kp-js .kp-aparece { opacity: 1; transform: none; transition: none; }
  .product-card_image, .shadow-two-2, .button_md, .testimonios-slider_cms_item .card { transition: none; }
}

/* =====================================================================
   Secciones nuevas de la portada: Skin Analyzer y «Para profesionales»
   ===================================================================== */
.kp-skin { padding: 32px 0 104px; background-image: linear-gradient(#fff, #ffeef2 55%, #fff); }
.kp-skin_grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.kp-skin_foto { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: #f5edef; }
.kp-skin_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--kp-entrada); }
.kp-skin_foto:hover img { transform: scale(1.03); }
.kp-skin_sello { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--kp-tinto); font-size: 13px; font-weight: 500; }
.kp-skin_sello i { width: 7px; height: 7px; border-radius: 999px; background: #1f7a58; animation: kp-latido 1.6s ease-in-out infinite; }
@keyframes kp-latido { 50% { opacity: .3; } }
.kp-skin_texto .subheading { margin: 0 0 16px; }
.kp-skin_texto .h2 { margin: 0 0 24px; }
.kp-skin_texto .paragraph-lg { margin: 0 0 32px; max-width: 520px; }
.kp-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; margin: 0 0 40px; border-top: 1px solid #e3d5da; }
.kp-datos div { padding: 20px 16px 0 0; }
.kp-datos div + div { padding-left: 16px; border-left: 1px solid #ebe1e4; }
.kp-datos strong { display: block; font-family: "Noto Serif Display", serif; font-weight: 500; font-size: 36px; line-height: 1; color: var(--kp-tinto); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kp-datos span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: #67555d; }
.kp-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.kp-nota { font-size: 14px; color: #7e6a73; }

/* «Para profesionales»: el mismo rosa del carrusel de la portada (#e5bcba, medido), con tarjetas
   blancas y texto tinto. Paul (7-oct-2026): «el morado no va, tiene que ser más claro como el hero». */
.kp-pro { position: relative; padding: 88px 0 96px; background: #e5bcba; color: var(--kp-tinto); overflow: hidden; isolation: isolate; }
.kp-pro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -30%; width: 120%; height: 80%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.35), transparent 62%); pointer-events: none; }
.kp-pro_cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 40px; }
.kp-pro .subheading { color: #410921; margin: 0 0 16px; }
.kp-pro .h2 { color: var(--kp-tinto); margin: 0; }
.kp-pro_bajada { margin: 0; font-size: 18px; line-height: 1.6; color: #410921; max-width: 520px; }
.kp-pro_tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.kp-tarjeta { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(38,5,20,.06); transition: transform .5s var(--kp-entrada), box-shadow .5s var(--kp-entrada); }
.kp-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--kp-sombra); }
.kp-tarjeta_foto { height: 200px; overflow: hidden; background: #f5edef; }
.kp-tarjeta_foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--kp-entrada); }
.kp-tarjeta:hover .kp-tarjeta_foto img { transform: scale(1.05); }
.kp-tarjeta_cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 26px 26px; }
.kp-tarjeta_marca { font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--kp-vino); }
.kp-tarjeta h3 { margin: 0; font-family: "Noto Serif Display", serif; font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; color: var(--kp-tinto); }
.kp-tarjeta p { margin: 0; font-size: 14px; line-height: 1.55; color: #5c4a52; }
.kp-lineas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.kp-lineas a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-top: 1px solid #ebe1e4;
  color: var(--kp-tinto); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .2s var(--kp-suave); }
.kp-lineas a span { font-size: 13px; font-weight: 400; color: #7e6a73; transition: transform .35s var(--kp-entrada), color .2s var(--kp-suave); }
.kp-lineas a:hover { color: var(--kp-vino); }
.kp-lineas a:hover span { color: var(--kp-vino); transform: translateX(4px); }
.kp-tarjeta .button_md { align-self: flex-start; margin-top: auto; padding: 12px 24px; font-size: 14px; }
.kp-discreto { margin-top: 2px; font-size: 13px; color: #7e6a73; text-decoration: underline; text-underline-offset: 4px; }
.kp-discreto:hover { color: var(--kp-vino); }

@media screen and (max-width: 991px) {
  .kp-skin_grid { grid-template-columns: 1fr; gap: 40px; }
  .kp-skin_foto { max-width: 520px; }
  .kp-pro_cab { grid-template-columns: 1fr; gap: 20px; }
  .kp-pro_tarjetas { grid-template-columns: 1fr; }
  .kp-opcion { min-width: 0; }
}
@media screen and (max-width: 767px) {
  .kp-skin { padding: 8px 0 72px; }
  .kp-pro { padding: 72px 0; }
  .kp-datos strong { font-size: 28px; }
  .kp-datos span { font-size: 12px; }
  .kp-tarjeta_cuerpo { padding: 24px 20px 28px; }
  .kp-tarjeta h3 { font-size: 24px; }
  .kp-tarjeta_foto { height: 170px; }
  .kp-acciones .button_md, .kp-tarjeta .button_md { width: 100%; text-align: center; }
}