/* =========================================================
   KITCHUP! CSS PERSONALIZADO SANO
   Reemplazar TODO el CSS personalizado actual por este
========================================================= */

:root {
  --ku-yellow: #ffc400;
  --ku-black: #111111;
  --ku-white: #ffffff;
  --ku-cream: #f7f3eb;
  --ku-cream-2: #f6f1e8;
  --ku-muted: #4f463e;
  --ku-line: rgba(17,17,17,0.12);
  --ku-line-strong: rgba(17,17,17,0.16);
}

/* =========================================================
   BASE
========================================================= */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 !important;
  background: var(--ku-cream) !important;
  color: var(--ku-black) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}

a {
  text-underline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(255,196,0,0.72) !important;
  outline-offset: 4px !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ku-black);
  letter-spacing: -0.04em;
}

p {
  color: inherit;
}

#home,
#acerca-de,
#servicios,
#marcas,
#preguntas-frecuentes,
#contacto {
  scroll-margin-top: 96px;
}

main,
#root,
.page,
.wrapper,
.site-content,
.main-content,
.ss-content,
.ssc-content,
#customPageContent {
  background: var(--ku-cream) !important;
}

.ss-separator:empty,
.ssc-separator:empty,
div[data-ss-empty="true"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* texto oculto accesible */
.ku-sr-only,
.ku-sr-only-whatsapp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   HEADER / NAV
========================================================= */

body header,
body nav,
body .navbar,
body .ss-navbar,
body .ssc-navbar,
body .ss-header,
body .ssc-header,
body .site-header,
body .main-header,
body #ss-header,
body #ss-navbar,
body .header-custom-background-color {
  background: var(--ku-yellow) !important;
  background-color: var(--ku-yellow) !important;
  color: var(--ku-black) !important;
  border-bottom: 1px solid rgba(17,17,17,0.12) !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

body header *,
body nav *,
body .navbar *,
body .ss-navbar *,
body .ssc-navbar *,
body .ss-header *,
body .ssc-header *,
body .site-header *,
body .main-header *,
body #ss-header *,
body #ss-navbar * {
  box-shadow: none !important;
}

body header a,
body nav a,
body .navbar a,
body .ss-navbar a,
body .ssc-navbar a,
body .ss-header a,
body .ssc-header a,
body .site-header a,
body .main-header a,
body #ss-header a,
body #ss-navbar a {
  color: var(--ku-black) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  opacity: 1 !important;
}

body header a:hover,
body nav a:hover,
body .navbar a:hover,
body .ss-navbar a:hover,
body .ssc-navbar a:hover,
body .ss-header a:hover,
body .ssc-header a:hover,
body .site-header a:hover,
body .main-header a:hover,
body #ss-header a:hover,
body #ss-navbar a:hover {
  opacity: 0.68 !important;
}

body header img,
body nav img,
body .navbar img,
body .ss-navbar img,
body .ssc-navbar img,
body .ss-header img,
body .ssc-header img,
body .site-header img,
body .main-header img,
body #ss-header img,
body #ss-navbar img {
  max-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* =========================================================
   BOTONES Y FORMULARIOS
========================================================= */

.btn,
.btn-primary,
button,
input[type="submit"] {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--ku-black) !important;
  border-color: var(--ku-black) !important;
  color: var(--ku-white) !important;
}

.btn:hover,
.btn-primary:hover {
  box-shadow: none !important;
  opacity: 0.88 !important;
}

input,
textarea,
select {
  border-radius: 6px !important;
  border: 1px solid rgba(17,17,17,0.16) !important;
  outline: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ku-black) !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08) !important;
}

textarea {
  resize: vertical;
}

/* Links de WhatsApp de contenido, NO el flotante */
a[href*="wa.me"]:not(#whatsapp-float):not(.whatsapp),
a[href*="web.whatsapp.com"]:not(#whatsapp-float):not(.whatsapp),
a[href*="api.whatsapp.com"]:not(#whatsapp-float):not(.whatsapp) {
  transition: opacity .18s ease !important;
}

a[href*="wa.me"]:not(#whatsapp-float):not(.whatsapp):hover,
a[href*="web.whatsapp.com"]:not(#whatsapp-float):not(.whatsapp):hover,
a[href*="api.whatsapp.com"]:not(#whatsapp-float):not(.whatsapp):hover {
  opacity: 0.86 !important;
}

/* =========================================================
   COMPONENTES LEGACY / COMPATIBILIDAD
========================================================= */

.ku-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: transparent;
  color: var(--ku-black);
  border: 1px solid rgba(17,17,17,0.16);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ku-card {
  background: #ffffff;
  border: 1px solid rgba(17,17,17,0.10);
  border-radius: 12px;
  box-shadow: none;
}

.ku-section {
  padding: 72px 18px;
}

.ku-container {
  max-width: 1180px;
  margin: 0 auto;
}

/* =========================================================
   SLIDER / MARCAS
========================================================= */

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
  box-shadow: none !important;
}

.gallery-ss img,
.galeria-03 img {
  box-shadow: none !important;
}

#marcas .gallery-ss,
#marcas .swiper,
#marcas .swiper-wrapper,
#marcas .swiper-slide {
  background: #ffffff !important;
}

/* mantiene el carrusel, oculta controles */
#marcas .swiper-button-prev,
#marcas .swiper-button-next,
#marcas .swiper-pagination,
#marcas .swiper-navs-wrapper {
  display: none !important;
}

/* =========================================================
   OCULTAR ECOMMERCE / LOGIN SITIOSIMPLE
========================================================= */

a[href*="catalogo"],
a[href*="catálogo"],
a[href*="cart"],
a[href*="carrito"],
a[href*="checkout"],
a[href*="login"],
a[href*="registro"],
a[href*="account"],
a[href*="cuenta"],
a[href*="password"],
a[href*="reset"],
[id*="cart"],
[id*="Cart"],
[id*="carrito"],
[id*="Carrito"],
[id*="checkout"],
[id*="Checkout"],
[id*="login"],
[id*="Login"],
[id*="account"],
[id*="Account"],
[class*="cart"],
[class*="Cart"],
[class*="carrito"],
[class*="Carrito"],
[class*="checkout"],
[class*="Checkout"],
[class*="login"],
[class*="Login"],
[class*="account"],
[class*="Account"],
[class*="register"],
[class*="Register"] {
  display: none !important;
}

/* =========================================================
   CONTACTO
========================================================= */

#contacto::before,
#contacto::after {
  display: none !important;
  content: none !important;
}

#contacto {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#contacto,
#contacto section {
  border-bottom: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* =========================================================
   FOOTER NEGRO SANO
   Clave: --bs-primary se pisa SOLO dentro del footer
========================================================= */

footer,
.ss-footer,
.ssc-footer,
.site-footer,
.main-footer,
#footer,
#ss-footer,
#site-footer,
.footer-custom-background-color {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: #111111 !important;
  background-color: #111111 !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin: 0 !important;
  padding: 24px 18px !important;
  min-height: 0 !important;
  height: auto !important;
  text-align: center !important;
}

/* Internos del footer */
footer > div,
.ss-footer > div,
.ssc-footer > div,
.site-footer > div,
.main-footer > div,
#footer > div,
#ss-footer > div,
#site-footer > div,
.footer-custom-background-color > div,
footer section,
.ss-footer section,
.ssc-footer section,
.site-footer section,
.main-footer section,
#footer section,
#ss-footer section,
#site-footer section,
.footer-custom-background-color section {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Containers internos */
footer .container,
footer .container-fluid,
footer .row,
footer .col,
footer [class*="container"],
.ss-footer .container,
.ss-footer .container-fluid,
.ssc-footer .container,
.ssc-footer .container-fluid,
.site-footer .container,
.site-footer .container-fluid,
.main-footer .container,
.main-footer .container-fluid,
#footer .container,
#footer .container-fluid,
#ss-footer .container,
#ss-footer .container-fluid,
#site-footer .container,
#site-footer .container-fluid,
.footer-custom-background-color .container,
.footer-custom-background-color .container-fluid {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Cualquier fondo amarillo por clase Bootstrap dentro del footer */
footer .bg-primary,
.ss-footer .bg-primary,
.ssc-footer .bg-primary,
.site-footer .bg-primary,
.main-footer .bg-primary,
#footer .bg-primary,
#ss-footer .bg-primary,
#site-footer .bg-primary,
.footer-custom-background-color .bg-primary {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: transparent !important;
  background-color: transparent !important;
}

/* Pseudo elementos del footer */
footer::before,
footer::after,
.ss-footer::before,
.ss-footer::after,
.ssc-footer::before,
.ssc-footer::after,
.site-footer::before,
.site-footer::after,
.main-footer::before,
.main-footer::after,
#footer::before,
#footer::after,
#ss-footer::before,
#ss-footer::after,
#site-footer::before,
#site-footer::after,
.footer-custom-background-color::before,
.footer-custom-background-color::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  height: 0 !important;
}

/* Texto footer */
footer,
footer p,
footer span,
footer div,
footer small,
footer strong,
footer li,
.ss-footer,
.ss-footer p,
.ss-footer span,
.ss-footer div,
.ssc-footer,
.ssc-footer p,
.ssc-footer span,
.ssc-footer div,
.site-footer,
.site-footer p,
.site-footer span,
.site-footer div,
.main-footer,
.main-footer p,
.main-footer span,
.main-footer div,
#footer,
#footer p,
#footer span,
#footer div,
#ss-footer,
#ss-footer p,
#ss-footer span,
#ss-footer div,
#site-footer,
#site-footer p,
#site-footer span,
#site-footer div {
  color: #ffffff !important;
}

/* Links footer */
footer a,
.ss-footer a,
.ssc-footer a,
.site-footer a,
.main-footer a,
#footer a,
#ss-footer a,
#site-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
}

footer a:hover,
.ss-footer a:hover,
.ssc-footer a:hover,
.site-footer a:hover,
.main-footer a:hover,
#footer a:hover,
#ss-footer a:hover,
#site-footer a:hover {
  color: var(--ku-yellow) !important;
}

/* Copyright */
footer .copyright,
footer .copy,
footer [class*="copyright"],
footer [class*="Copyright"],
.ss-footer .copyright,
.ssc-footer .copyright,
.site-footer .copyright,
.main-footer .copyright,
#footer .copyright,
#ss-footer .copyright,
#site-footer .copyright {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  text-align: center !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

/* =========================================================
   WHATSAPP FLOAT CORRECTO
   Wrapper fijo + link interno estático
========================================================= */

/* El wrapper es el botón fijo */
.background-ws {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;

  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #25d366 !important;
  background-color: #25d366 !important;

  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(17,17,17,0.28) !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  z-index: 2147483647 !important;

  pointer-events: auto !important;
  cursor: pointer !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Anula el hover original que escala el wrapper */
.background-ws:hover,
.background-ws:active,
.background-ws:focus,
.background-ws:focus-within {
  background: #25d366 !important;
  background-color: #25d366 !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* El link interno ocupa el wrapper; NO es fixed */
.background-ws > a#whatsapp-float,
.background-ws > a.whatsapp,
.background-ws a#whatsapp-float,
.background-ws a.whatsapp {
  position: static !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;

  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;

  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;

  text-decoration: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* Hover del link interno sin movimiento */
.background-ws > a#whatsapp-float:hover,
.background-ws > a.whatsapp:hover,
.background-ws a#whatsapp-float:hover,
.background-ws a.whatsapp:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: #ffffff !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* Ícono interno */
.background-ws a#whatsapp-float i,
.background-ws a#whatsapp-float svg,
.background-ws a#whatsapp-float img,
.background-ws a.whatsapp i,
.background-ws a.whatsapp svg,
.background-ws a.whatsapp img {
  display: block !important;

  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;

  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;

  background: transparent !important;
  background-color: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* Pseudo-elementos si SitioSimple usa icono por CSS */
.background-ws a#whatsapp-float::before,
.background-ws a#whatsapp-float::after,
.background-ws a.whatsapp::before,
.background-ws a.whatsapp::after {
  color: #ffffff !important;
  background: transparent !important;
  background-color: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: none !important;

  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {
  #home,
  #acerca-de,
  #servicios,
  #marcas,
  #preguntas-frecuentes,
  #contacto {
    scroll-margin-top: 80px;
  }

  body header img,
  body nav img,
  body .navbar img,
  body .ss-navbar img,
  body .ssc-navbar img,
  body .ss-header img,
  body .ssc-header img,
  body .site-header img,
  body .main-header img {
    max-height: 38px !important;
  }

  footer,
  .ss-footer,
  .ssc-footer,
  .site-footer,
  .main-footer,
  #footer,
  #ss-footer,
  #site-footer,
  .footer-custom-background-color {
    padding: 20px 14px !important;
  }

  .background-ws {
    right: 18px !important;
    bottom: 18px !important;

    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  .background-ws a#whatsapp-float i,
  .background-ws a#whatsapp-float svg,
  .background-ws a#whatsapp-float img,
  .background-ws a.whatsapp i,
  .background-ws a.whatsapp svg,
  .background-ws a.whatsapp img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }
}

/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* =========================================================
   FOOTER FIX FINAL - NEGRO TOTAL SIN TOCAR WHATSAPP
   Pegar al final del CSS personalizado
========================================================= */

/* Footer y wrappers reales */
body footer,
body .ss-footer,
body .ssc-footer,
body .site-footer,
body .main-footer,
body #footer,
body #ss-footer,
body #site-footer,
body .footer-custom-background-color {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: #111111 !important;
  background-color: #111111 !important;
  color: #ffffff !important;

  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  margin: 0 !important;
  padding: 22px 18px !important;
  min-height: 0 !important;
  height: auto !important;

  text-align: center !important;
}

/* Todo lo interno del footer negro, EXCEPTO el botón flotante de WhatsApp */
body footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .ss-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .ssc-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .site-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .main-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body #footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body #ss-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body #site-footer *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .footer-custom-background-color *:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *) {
  --bs-primary: #111111 !important;
  --bs-primary-rgb: 17,17,17 !important;

  background: #111111 !important;
  background-color: #111111 !important;
  color: #ffffff !important;

  border-color: transparent !important;
  box-shadow: none !important;
}

/* Mata fondos amarillos inline comunes dentro del footer */
body footer [style*="ffc400"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body footer [style*="255,196,0"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body footer [style*="255, 196, 0"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body footer [style*="var(--bs-primary)"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .footer-custom-background-color [style*="ffc400"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .footer-custom-background-color [style*="255,196,0"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .footer-custom-background-color [style*="255, 196, 0"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *),
body .footer-custom-background-color [style*="var(--bs-primary)"]:not(.background-ws):not(.background-ws *):not(#whatsapp-float):not(#whatsapp-float *) {
  background: #111111 !important;
  background-color: #111111 !important;
}

/* Textos y links */
body footer,
body footer p,
body footer span,
body footer div:not(.background-ws),
body footer small,
body footer strong,
body footer li,
body .ss-footer,
body .ss-footer p,
body .ss-footer span,
body .ss-footer div:not(.background-ws),
body .ssc-footer,
body .ssc-footer p,
body .ssc-footer span,
body .ssc-footer div:not(.background-ws),
body .footer-custom-background-color,
body .footer-custom-background-color p,
body .footer-custom-background-color span,
body .footer-custom-background-color div:not(.background-ws) {
  color: #ffffff !important;
}

body footer a:not(#whatsapp-float),
body .ss-footer a:not(#whatsapp-float),
body .ssc-footer a:not(#whatsapp-float),
body .footer-custom-background-color a:not(#whatsapp-float) {
  color: #ffffff !important;
  text-decoration: none !important;
}

body footer a:not(#whatsapp-float):hover,
body .ss-footer a:not(#whatsapp-float):hover,
body .ssc-footer a:not(#whatsapp-float):hover,
body .footer-custom-background-color a:not(#whatsapp-float):hover {
  color: #ffc400 !important;
}

/* Mantener WhatsApp tal cual quedó funcionando */
body .background-ws {
  background: #25d366 !important;
  background-color: #25d366 !important;
}

body .background-ws > a#whatsapp-float,
body .background-ws a#whatsapp-float,
body .background-ws a.whatsapp {
  background: transparent !important;
  background-color: transparent !important;
}