/* Mega menu de Guias. No viene del tema: Shopify lo generaba desde su
   configurador y eso ya no existe. Paleta de Kuldu. */

/* El <li> se pone STATIC a proposito: asi el contexto de posicion pasa a ser
   el contenedor del encabezado (.container-fluid.relative) y el panel puede
   ocupar TODO el ancho. Colgado del <li>, el panel quedaba de 940px centrado
   bajo el item: parecia un desplegable, no un mega menu. */
.kda-has-mega{position:static}

.kda-mega{position:absolute;top:100%;left:0;right:0;
  transform:translateY(10px);
  background-color:#faf8f4 !important;border:1px solid #e7dcc8;
  border-radius:0 0 16px 16px;box-shadow:0 22px 60px rgba(34,52,67,.20);
  padding:34px 36px 24px;opacity:0;visibility:hidden;z-index:60;
  /* el <ul> del menu lleva whitespace-nowrap y el panel lo heredaba: el texto
     no envolvia y estiraba las columnas de la rejilla */
  white-space:normal;
  /* CIERRE CON GRACIA. Medido en el navegador: el <li> termina en y=153.5 y
     el panel empieza en y=163 --la fila del encabezado la marca el logo, que
     es mas alto que el menu--, asi que bajar el raton cruzaba 9.5px sin nada
     debajo y lo cerraba de golpe. El puente de abajo tapa ese hueco; esta
     demora cubre el otro caso, el movimiento en diagonal que se sale de los
     72px de ancho del item. Ya no hay pointer-events: con visibility:hidden
     el panel tampoco recibe el raton, y asi la demora lo deja agarrable
     mientras se desvanece. */
  transition:opacity .2s ease .32s,transform .2s ease .32s,
             visibility 0s linear .52s}
.kda-has-mega:hover>.kda-mega,.kda-has-mega:focus-within>.kda-mega{
  opacity:1;visibility:visible;transform:translateY(0);
  /* al ABRIR no hay demora */
  transition:opacity .16s ease 0s,transform .16s ease 0s,visibility 0s linear 0s}

/* EL PUENTE. El area sensible del enlace baja 10px mas para tocar el panel.
   El margen negativo devuelve esos 10px al flujo, asi que el <li> no crece y
   el menu no se mueve; y como el padding va por fuera de la caja de contenido,
   el texto tampoco se recorre. Se queda pegado al item --no al ancho completo
   del encabezado-- para no robarle clics al logo ni al carrito. */
.kda-has-mega>a.sf__parent-item{padding-bottom:calc(1.25rem + 10px);
  margin-bottom:-10px}

.kda-mega-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:30px;align-items:start;max-width:1320px;margin:0 auto}
.kda-mega-card{display:block;text-decoration:none;color:inherit}
/* Las fotos del panel son limpias --sin texto incrustado-- asi que la tarjeta
   puede ser ALTA de verdad. Antes se usaba la portada de la guia, que lleva el
   titulo dentro, y habia que recortarla a una banda de 3.4:1 para esconderlo. */
.kda-mega-card img{width:100%;aspect-ratio:16/10;object-fit:cover;
  object-position:50% 50%;border-radius:12px;display:block;background:#e7dcc8}
.kda-mega-card h4{margin:1rem 0 .3rem;font-size:1.06rem;line-height:1.25;
  color:#223443;text-transform:none;letter-spacing:0;font-weight:600}
.kda-mega-card p{margin:0;font-size:.86rem;line-height:1.4;color:#6f6d66;
  text-transform:none;letter-spacing:0;font-weight:400}
.kda-mega-card:hover h4{color:#c68e5f}
.kda-mega-card:hover img{filter:brightness(1.06)}

.kda-mega-pie{margin-top:26px;padding-top:16px;border-top:1px solid #e7dcc8;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  max-width:1320px;margin-left:auto;margin-right:auto}
.kda-mega-pie span{font-size:.84rem;color:#6f6d66;text-transform:none;
  letter-spacing:0;font-weight:400}
.kda-mega-pie a{font-size:.88rem;font-weight:600;color:#36546c;
  text-decoration:none;text-transform:none;letter-spacing:0;white-space:nowrap}
.kda-mega-pie a:hover{color:#c68e5f}

/* EL LOGO. El tema pinta el encabezado de blanco al abrir un desplegable y
   pasa el texto a oscuro --para eso existe .sf-header__dropdown-bg--. El sitio
   traia un solo logo, el blanco, asi que sobre blanco desaparecia. Ahora se
   cargan las DOS versiones del brand kit y se intercambian aqui; antes esto
   era un filtro que oscurecia el blanco a la fuerza. */
.kda-marca{display:flex;align-items:center;height:100%}
.kda-logo{display:block;width:auto;max-height:62px;height:auto}
.kda-logo--oscuro{display:none}
.sf-header:has(.kda-has-mega:hover) .kda-logo--claro,
.sf-header:has(.kda-has-mega:focus-within) .kda-logo--claro{display:none}
.sf-header:has(.kda-has-mega:hover) .kda-logo--oscuro,
.sf-header:has(.kda-has-mega:focus-within) .kda-logo--oscuro{display:block}

/* por debajo de 1100px manda el menu movil, que no lleva panel */
@media (max-width:1100px){.kda-mega{display:none}}