/* 
Theme Name: Keya (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


.keya-acc-grid{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font-family: "Raleway", sans-serif;
}

@media (max-width: 1024px){
  .keya-acc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px){
  .keya-acc-grid{ grid-template-columns: 1fr; }
}

.keya-acc-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Contenedor con proporción 4:3 (400x300) */
.keya-acc-media{
  width: 100%;
  aspect-ratio: 4 / 3;   /* 400x300 */
  overflow: hidden;
  border-radius: 12px;
}

/* Imagen recortada (cover) */
.keya-acc-img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* recorta sin deformar */
  object-position: center;
  display: block;
}

.keya-acc-title{
  margin:0;
  font-size:16px;
  line-height:1.2;
}

.keya-acc-desc{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color: #8D8C8C;
}

/* ============ Lupa del buscador (plugin KEYA Buscador) ============ */

/* Escritorio: la lupa no se veía porque el enlace hereda el padding lateral
   de 20px del CSS genérico del Nav Menu de Elementor (los enlaces normales
   lo anulan vía .elementor-item, la lupa no la tiene). Con width:40px y
   box-sizing:border-box el área de contenido quedaba en 0 y Chrome encogía
   el SVG (flex-item) hasta 0. Se anula el padding y se fija el tamaño del
   SVG con flex/min-width, que es lo que Chrome respeta. */
.keya-search-trigger {
  padding: 0 !important;
}

.keya-search-trigger svg {
  flex: 0 0 20px !important;
  min-width: 20px !important;
}

/* Colores: como el resto de enlaces del menú.
   Escritorio: negro (#2A2A2A) — ya lo pone el CSS del plugin.
   Móvil (menú fullscreen de Unlimited Elements, fondo #2A2A2A): blanco.
   Hover: azul corporativo (#0000FF) siempre. */
.ue_menu .keya-search-trigger,
.uc-list-menu .keya-search-trigger {
  color: #ffffff !important;
}

.ue_menu .keya-search-trigger:hover,
.ue_menu .keya-search-trigger:focus-visible,
.uc-list-menu .keya-search-trigger:hover,
.uc-list-menu .keya-search-trigger:focus-visible {
  color: #0000ff !important;
}


/* Fix navbar móvil desbordando viewport */
@media (max-width: 767px) {
  .elementor-element-ea9f05b {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Evitar scroll horizontal global */
  body, .elementor-section-wrap {
    overflow-x: hidden;
  }
}



/* Grid de productos KEYA */
.keya-productos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px 0;
}

/* sm: 2 columnas a partir de 600px */
@media (min-width: 600px) {
    .keya-productos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* md: 3 columnas a partir de 900px */
@media (min-width: 900px) {
    .keya-productos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* lg/xl: 4 columnas a partir de 1200px */
@media (min-width: 1200px) {
    .keya-productos-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.keya-producto-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.keya-producto-item:hover .keya-producto-titulo {
    text-decoration: underline;
}

.keya-producto-imagen img {
    width: 300px;
    height: 300px;
    max-width: 100%;
	min-width:100%;
    object-fit: contain;
    display: block;
}

.keya-producto-titulo {
    margin: 12px 0 6px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.keya-producto-link {
    font-size: 13px;
    color: inherit;
}