/**
 * Moshi Store CR - Estilos de categorías (Joyería, Tazas, etc.)
 * Mismo diseño que el menú de Figuras: nivel Pro, Cyberpunk/HUD.
 * Usa las clases en Elementor para que cualquier categoría se vea igual.
 */

/* ---- Variables neón (igual que Figuras) ---- */
:root {
  --moshi-neon-cyan: #00FFFF;
  --moshi-neon-magenta: #BC13FE;
  --moshi-neon-yellow: #F0E60C;
  --moshi-card-bg: rgba(11, 13, 15, 0.85);
  --moshi-card-radius: 20px;
  --moshi-card-shadow: 0px 0px 15px 0px #000000;
  --moshi-title-color: #6EC1E4;
  --moshi-title-stroke: #000;
}

/* ---- Contenedor grid de categorías (como la fila de Figuras) ---- */
.moshi-category-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 0;
  column-gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}

/* ---- Tarjeta de categoría (mismo tamaño y alineación que Figuras) ---- */
.moshi-category-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 1px;
  padding: 0 5px;
  border-radius: var(--moshi-card-radius);
  box-shadow: var(--moshi-card-shadow);
  text-align: center;
  align-self: stretch;
  box-sizing: border-box;
}

/* Imagen dentro de la tarjeta - altura fija como Figuras */
.moshi-category-card img {
  height: 350px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--moshi-card-radius);
  transition: opacity 0.5s ease, box-shadow 0.3s ease, transform 0.3s ease;
  border: none;
}

/* Efecto hover mejorado */
.moshi-category-card:hover img {
  transform: scale(1.02);
}

.moshi-category-card:hover img {
  opacity: 0.78;
}

/* Título de la categoría - Montserrat, mismo estilo que Figuras */
.moshi-category-card .elementor-heading-title,
.moshi-category-card .moshi-card-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  -webkit-text-stroke-color: var(--moshi-title-stroke);
  stroke: var(--moshi-title-stroke);
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  color: var(--moshi-title-color) !important;
}

/* Botón "Ver más" / CTA - outline neón */
.moshi-category-card .elementor-button,
.moshi-category-card .moshi-card-btn {
  background-color: transparent !important;
  border: 2px solid var(--moshi-neon-cyan) !important;
  border-radius: 100px !important;
  color: #fff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 12px 28px !important;
  transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.moshi-category-card .elementor-button:hover,
.moshi-category-card .elementor-button:focus,
.moshi-category-card .moshi-card-btn:hover {
  box-shadow: 0px 0px 15px 0px var(--moshi-neon-cyan) !important;
  background-color: var(--moshi-neon-cyan) !important;
  color: #000 !important;
}

/* Variante magenta (como la primera fila de Figuras) */
.moshi-category-card.moshi-card--magenta img {
  box-shadow: 0px 0px 15px 2px var(--moshi-neon-magenta);
}

.moshi-category-card.moshi-card--magenta .elementor-button,
.moshi-category-card.moshi-card--magenta .moshi-card-btn {
  border-color: var(--moshi-neon-magenta) !important;
}

.moshi-category-card.moshi-card--magenta .elementor-button:hover,
.moshi-category-card.moshi-card--magenta .elementor-button:focus,
.moshi-category-card.moshi-card--magenta .moshi-card-btn:hover {
  box-shadow: 0px 0px 15px 0px var(--moshi-neon-magenta) !important;
  background-color: var(--moshi-neon-magenta) !important;
}

/* Variante cyan (como la segunda fila de Figuras) - por defecto ya es cyan */
.moshi-category-card.moshi-card--cyan img,
.moshi-category-card:not(.moshi-card--magenta) img {
  box-shadow: 0px 0px 15px 0px #FFFFFF;
}

/* Contenedor interno de cada tarjeta (columna en Elementor) */
.moshi-category-grid .elementor-column,
.moshi-category-grid .e-con {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---- Responsive: mismo breakpoints que post-76 ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .moshi-category-grid .elementor-column,
  .moshi-category-grid .e-con {
    width: 25%;
  }
}

/* Responsive móvil - Estilo Apple horizontal y elegante */
@media (max-width: 767px) {
  .moshi-category-grid {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
  }

  .moshi-category-grid .elementor-column,
  .moshi-category-grid .e-con {
    width: calc(50% - 7px) !important;
    padding: 0 !important;
    margin-bottom: 0;
  }

  .moshi-category-card {
    padding: 0;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .moshi-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  /* Imágenes más horizontales - estilo Apple */
  .moshi-category-card img {
    height: 160px !important;
    border-radius: 18px 18px 0 0 !important;
    object-fit: cover;
    object-position: center;
  }

  /* Contenido de la tarjeta */
  .moshi-category-card .elementor-widget-wrap {
    padding: 10px 12px 12px !important;
  }

  /* Títulos y textos más legibles */
  .moshi-category-card .elementor-heading-title,
  .moshi-category-card .moshi-card-title {
    font-size: 13px !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    padding: 0 !important;
  }

  /* Botones más pequeños en móvil */
  .moshi-category-card .elementor-button,
  .moshi-category-card .moshi-card-btn {
    font-size: 12px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    width: 100%;
  }

  /* Ajuste para body.moshi-category-page */
  body.moshi-category-page .elementor-widget-image img {
    height: 160px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body.moshi-category-page .elementor-heading-title {
    font-size: 13px !important;
    margin-top: 0 !important;
    padding: 10px 12px 6px !important;
  }

  body.moshi-category-page .elementor-button {
    font-size: 12px !important;
    padding: 8px 16px !important;
    margin: 0 12px 12px !important;
  }

  /* Ajuste para elementor-779 y otras páginas */
  .elementor-779 .elementor-widget-image img {
    height: 160px !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .elementor-779 .elementor-heading-title {
    font-size: 13px !important;
  }

  .elementor-779 .elementor-button {
    font-size: 12px !important;
    padding: 8px 16px !important;
  }
}

@media (max-width: 479px) {
  .moshi-category-grid {
    gap: 12px;
  }

  .moshi-category-grid .elementor-column,
  .moshi-category-grid .e-con {
    width: calc(50% - 6px) !important;
  }

  /* Imágenes ligeramente más pequeñas en pantallas muy pequeñas */
  .moshi-category-card img {
    height: 140px !important;
  }

  body.moshi-category-page .elementor-widget-image img,
  .elementor-779 .elementor-widget-image img {
    height: 140px !important;
  }
}

/* ---- Páginas de categoría (Joyería, Tazas, etc.): mismo look que Figuras ---- */
/* Añade la clase CSS "moshi-category-page" al contenedor principal en Elementor (Avanzado > Clase CSS) */
/* O el body tendrá page-id-XXX; estas reglas aplican a la primera sección de contenido. */

body.moshi-category-page .elementor-section > .elementor-container,
body.moshi-category-page .elementor-top-section > .e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  width: 100% !important;
}

body.moshi-category-page .elementor-widget-image img {
  height: 350px;
  object-fit: cover;
  object-position: center center;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px #FFFFFF;
  transition: opacity 0.5s ease;
}

body.moshi-category-page .elementor-widget-image:hover img {
  opacity: 0.78;
}

body.moshi-category-page .elementor-heading-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  -webkit-text-stroke-color: #000;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  color: var(--moshi-title-color, #6EC1E4) !important;
}

body.moshi-category-page .elementor-button {
  background-color: transparent !important;
  border: 2px solid var(--moshi-neon-cyan) !important;
  border-radius: 100px !important;
  color: #fff !important;
}

body.moshi-category-page .elementor-button:hover,
body.moshi-category-page .elementor-button:focus {
  box-shadow: 0px 0px 15px 0px var(--moshi-neon-cyan) !important;
  background-color: var(--moshi-neon-cyan) !important;
  color: #000 !important;
}

/* Por ID de página (ej. post-779 = Joyería): mismo estilo */
.elementor-779 .e-con[data-element_type="container"],
.elementor-779 .elementor-section .elementor-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.elementor-779 .elementor-widget-image img {
  height: 350px;
  object-fit: cover;
  object-position: center center;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px #FFFFFF;
  transition: opacity 0.5s ease;
}

.elementor-779 .elementor-widget-image:hover img {
  opacity: 0.78;
}

.elementor-779 .elementor-heading-title {
  font-family: "Montserrat", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  -webkit-text-stroke-color: #000;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  color: var(--moshi-title-color, #6EC1E4) !important;
}

.elementor-779 .elementor-button {
  background-color: transparent !important;
  border: 2px solid var(--moshi-neon-cyan) !important;
  border-radius: 100px !important;
  color: #fff !important;
}

.elementor-779 .elementor-button:hover,
.elementor-779 .elementor-button:focus {
  box-shadow: 0px 0px 15px 0px var(--moshi-neon-cyan) !important;
  background-color: var(--moshi-neon-cyan) !important;
  color: #000 !important;
}

/* ---- Títulos de sección mejorados para móvil ---- */
@media (max-width: 767px) {
  /* Títulos principales como "¡EXPLORA NUESTRA COLECCIÓN!" */
  .elementor-widget-heading .elementor-heading-title,
  h1.elementor-heading-title,
  h2.elementor-heading-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    padding: 0 15px !important;
    text-align: center !important;
  }

  /* Espaciado de secciones en móvil */
  .elementor-section,
  .elementor-top-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* Contenedor principal más compacto */
  .elementor-container {
    padding: 0 10px !important;
  }

  /* Mejorar legibilidad de subtítulos */
  .elementor-widget-text-editor {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 479px) {
  h1.elementor-heading-title,
  h2.elementor-heading-title {
    font-size: 20px !important;
  }
}