/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Description:  Child theme del Colegio Juan Ramon Jimenez
Version:      1.0.0
*/

/* =============================================
   TIENDA - CATEGORIAS PRINCIPALES (JRJ)
   ============================================= */

#jrj-tienda-custom {
	  font-family: "Noto Sans Georgian", Roboto, sans-serif;
	  max-width: 1200px;
	  margin: 40px auto 60px;
	  padding: 0 24px;
}
#jrj-tienda-custom .jrj-page-title {
	  text-align: center;
	  font-size: 2.2rem;
	  font-weight: 700;
	  color: #263162;
	  margin-bottom: 12px;
	  letter-spacing: -0.5px;
}
#jrj-tienda-custom .jrj-page-subtitle {
	  text-align: center;
	  color: #6b7280;
	  font-size: 1rem;
	  margin-bottom: 48px;
}
#jrj-tienda-custom .jrj-grid {
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  gap: 28px;
	  align-items: start;
}
#jrj-tienda-custom .jrj-card {
	  background: #fff;
	  border-radius: 18px;
	  box-shadow: 0 4px 24px rgba(38,49,98,0.10);
	  overflow: hidden;
	  border: 2px solid #e8eaf0;
	  transition: box-shadow 0.25s, transform 0.25s;
}
#jrj-tienda-custom .jrj-card:hover {
	  box-shadow: 0 8px 36px rgba(38,49,98,0.18);
	  transform: translateY(-3px);
}
#jrj-tienda-custom .jrj-card-header {
	  padding: 24px 24px 18px;
	  display: flex;
	  align-items: center;
	  gap: 14px;
	  border-bottom: 2px solid #f0f2f7;
}
#jrj-tienda-custom .jrj-card-header-infantil { background: linear-gradient(135deg, #eaf4ff 0%, #dbeafe 100%); }
#jrj-tienda-custom .jrj-card-header-primaria { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
#jrj-tienda-custom .jrj-card-header-eso      { background: linear-gradient(135deg, #fef9ec 0%, #fde68a 100%); }
#jrj-tienda-custom .jrj-card-icon {
	  width: 52px;
	  height: 52px;
	  border-radius: 12px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 1.6rem;
	  flex-shrink: 0;
}
#jrj-tienda-custom .icon-infantil { background: #3b82f6; }
#jrj-tienda-custom .icon-primaria  { background: #10b981; }
#jrj-tienda-custom .icon-eso       { background: #f59e0b; }
#jrj-tienda-custom .jrj-card-title {
	  font-size: 1.25rem;
	  font-weight: 700;
	  color: #263162;
	  margin: 0;
	  line-height: 1.2;
}
#jrj-tienda-custom .jrj-card-count {
	  font-size: 0.78rem;
	  color: #8b9bbf;
	  margin-top: 3px;
}
#jrj-tienda-custom .jrj-subcats {
	  padding: 16px 16px 20px;
	  display: flex;
	  flex-direction: column;
	  gap: 8px;
}
#jrj-tienda-custom .jrj-subcat-item {
	  display: flex;
	  align-items: center;
	  gap: 12px;
	  padding: 10px 12px;
	  border-radius: 10px;
	  text-decoration: none !important;
	  color: #263162 !important;
	  background: #f7f8fc;
	  transition: background 0.18s, color 0.18s;
	  border: 1px solid transparent;
}
#jrj-tienda-custom .jrj-subcat-item:hover {
	  background: #263162;
	  color: #fff !important;
	  border-color: #263162;
}
#jrj-tienda-custom .jrj-subcat-item:hover .jrj-subcat-badge {
	  background: rgba(255,255,255,0.25);
	  color: #fff;
}
#jrj-tienda-custom .jrj-subcat-img {
	  width: 38px;
	  height: 38px;
	  border-radius: 8px;
	  object-fit: cover;
	  flex-shrink: 0;
}
#jrj-tienda-custom .jrj-subcat-name {
	  flex: 1;
	  font-size: 0.88rem;
	  font-weight: 600;
	  line-height: 1.3;
}
#jrj-tienda-custom .jrj-subcat-badge {
	  background: #e8eaf0;
	  color: #263162;
	  font-size: 0.72rem;
	  font-weight: 700;
	  padding: 2px 8px;
	  border-radius: 20px;
	  flex-shrink: 0;
	  transition: background 0.18s, color 0.18s;
}
@media (max-width: 900px) {
	#jrj-tienda-custom .jrj-grid { grid-template-columns: 1fr; }
}

/* =============================================
   TOPBAR - FRANJA SUPERIOR DE AVISO (JRJ)
   Selector real: [data-id="d64fe0f"] = container externo
   El fondo va en el container externo (100% ancho)
   El contenido ya está centrado por el .e-con-inner (max-width: 1140px)
   ============================================= */

/* Fondo degradado azul corporativo - ocupa todo el ancho */
.elementor-element-d64fe0f.e-con-box {
	  background: linear-gradient(90deg, #1e2d5e 0%, #263162 40%, #1a4a8a 70%, #263162 100%) !important;
	  padding-top: 0 !important;
	  padding-bottom: 0 !important;
	  position: relative;
	  overflow: hidden;
}

/* Efecto de brillo sutil que recorre la barra */
.elementor-element-d64fe0f.e-con-box::before {
	  content: '';
	  position: absolute;
	  top: 0;
	  left: -120%;
	  width: 50%;
	  height: 100%;
	  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
	  animation: jrj-topbar-shine 6s ease-in-out infinite;
	  pointer-events: none;
}

@keyframes jrj-topbar-shine {
	0%   { left: -120%; }
	45%  { left: 160%; }
	100% { left: 160%; }
}

/* Inner centrado - ajustar alineación vertical */
.elementor-element-d64fe0f .e-con-inner {
	  align-items: center !important;
	  padding-top: 10px !important;
	  padding-bottom: 10px !important;
}

/* Texto del aviso */
.elementor-element-d64fe0f .elementor-widget-text-editor p,
.elementor-element-d64fe0f .elementor-text-editor p {
	  color: rgba(255, 255, 255, 0.92) !important;
	  font-size: 13.5px !important;
	  font-weight: 500 !important;
	  letter-spacing: 0.2px !important;
	  margin: 0 !important;
}

/* Botón "Ver información" - estilo pill transparente */
.elementor-element-d64fe0f .elementor-button {
	  background: rgba(255, 255, 255, 0.13) !important;
	  color: #ffffff !important;
	  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
	  border-radius: 30px !important;
	  padding: 6px 20px !important;
	  font-size: 12.5px !important;
	  font-weight: 600 !important;
	  letter-spacing: 0.3px !important;
	  transition: background 0.2s ease, border-color 0.2s ease !important;
	  text-decoration: none !important;
}

.elementor-element-d64fe0f .elementor-button:hover {
	  background: rgba(255, 255, 255, 0.25) !important;
	  border-color: rgba(255, 255, 255, 0.75) !important;
}

/* 
 * TOPBAR - selector de alta especificidad para superar el CSS generado por Elementor
 * Elementor usa: .elementor-5303 .elementor-element.elementor-element-d64fe0f:not(...)
 * Usamos el mismo patrón con el gradiente corporativo
 */
.elementor-5303 .elementor-element.elementor-element-d64fe0f:not(.elementor-motion-effects-element-type-background),
.elementor-5303 .elementor-element.elementor-element-d64fe0f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	  background: linear-gradient(90deg, #1e2d5e 0%, #263162 40%, #1a4a8a 70%, #263162 100%) !important;
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 900px)
   ============================================ */
@media (max-width: 900px) {
	    #jrj-tienda-custom {
			        padding: 0 16px;
			        margin: 24px auto 40px;
	}
	    #jrj-tienda-custom .jrj-grid {
			        grid-template-columns: 1fr;
			        gap: 20px;
	}
	    #jrj-tienda-custom .jrj-card {
			        max-width: 520px;
			        margin: 0 auto;
			        width: 100%;
			        box-sizing: border-box;
	}
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 600px)
   ============================================ */
@media (max-width: 600px) {
	    #jrj-tienda-custom {
			        padding: 0 10px;
			        margin: 16px auto 30px;
	}
	    #jrj-tienda-custom .jrj-page-title {
			        font-size: 1.6rem;
			        margin-bottom: 8px;
	}
	    #jrj-tienda-custom .jrj-card {
			        max-width: 100%;
			        border-radius: 12px;
	}
	    #jrj-tienda-custom .jrj-card-header {
			        padding: 16px 16px 14px;
			        gap: 10px;
			        flex-wrap: nowrap;
	}
	    #jrj-tienda-custom .jrj-card-icon {
			        width: 40px;
			        height: 40px;
			        font-size: 1.3rem;
			        flex-shrink: 0;
	}
	    #jrj-tienda-custom .jrj-card-title {
			        font-size: 1.1rem;
	}
	    #jrj-tienda-custom .jrj-card-count {
			        font-size: 0.72rem;
	}
	    #jrj-tienda-custom .jrj-subcats {
			        padding: 10px 10px 14px;
			        gap: 6px;
	}
	    #jrj-tienda-custom .jrj-subcat-item {
			        padding: 8px 10px;
			        gap: 8px;
	}
	    #jrj-tienda-custom .jrj-subcat-img {
			        width: 32px;
			        height: 32px;
			        border-radius: 6px;
			        flex-shrink: 0;
	}
	    #jrj-tienda-custom .jrj-subcat-name {
			        font-size: 0.82rem;
	}
	    #jrj-tienda-custom .jrj-subcat-badge {
			        font-size: 0.66rem;
			        padding: 2px 7px;
			        white-space: nowrap;
	}
}

/* ============================================
   RESPONSIVE - TOPBAR MOBILE (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {
	    .elementor-element-d64fe0f .e-con-inner {
			        flex-direction: column !important;
			        align-items: center !important;
			        justify-content: center !important;
			        text-align: center !important;
			        gap: 6px !important;
			        padding-top: 10px !important;
			        padding-bottom: 10px !important;
			        min-height: unset !important;
	}
	    .elementor-element-d64fe0f .elementor-widget-text-editor p,
	    .elementor-element-d64fe0f .elementor-widget-text-editor {
			        text-align: center !important;
			        font-size: 12px !important;
			        line-height: 1.4 !important;
	}
	    .elementor-element-d64fe0f .elementor-button-wrapper {
			        text-align: center !important;
	}
	    .elementor-element-d64fe0f .elementor-button {
			        padding: 5px 16px !important;
			        font-size: 11px !important;
	}
}