.elementor-94302 .elementor-element.elementor-element-b99c2e0{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:50px 20px;--row-gap:50px;--column-gap:20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-94302 .elementor-element.elementor-element-aef8890{--display:flex;--width:20%;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-94302 .elementor-element.elementor-element-6d3c639 .the7-heading-title{font-weight:700;text-decoration-style:solid;}.elementor-94302 .elementor-element.elementor-element-3e5165e .the7-heading-title{text-decoration-style:solid;}.elementor-94302 .elementor-element.elementor-element-3457850 > .elementor-widget-container{padding:0px 0px 10px 0px;border-style:solid;border-width:0px 0px 1px 0px;border-color:var( --e-global-color-el_color_2_2 );}.elementor-94302 .elementor-element.elementor-element-3457850 .wpgb-facet > fieldset:last-child{margin-bottom:0;}.elementor-94302 .elementor-element.elementor-element-3457850 li [class^="wpgb-"][class$="-label"] span{color:var( --e-global-color-el_color_2_2 );}.elementor-94302 .elementor-element.elementor-element-3457850 .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control{background-color:var( --e-global-color-el_color_2_2 );border-color:var( --e-global-color-el_color_2_2 );}.elementor-94302 .elementor-element.elementor-element-4e0ba27 > .elementor-widget-container{padding:0px 0px 10px 0px;}.elementor-94302 .elementor-element.elementor-element-4e0ba27 .wpgb-facet > fieldset:last-child{margin-bottom:0;}.elementor-94302 .elementor-element.elementor-element-4e0ba27 button.wpgb-button{background-color:var( --e-global-color-el_color_2_2 );margin:0px 0px 0px 0px;}.elementor-94302 .elementor-element.elementor-element-4e0ba27 button.wpgb-button:not([disabled]):hover, .elementor-94302 .elementor-element.elementor-element-4e0ba27 button.wpgb-button:not([disabled]):focus{background-color:var( --e-global-color-el_color_2 );}.elementor-94302 .elementor-element.elementor-element-f1f5127{--display:flex;--width:80%;--justify-content:flex-start;}.elementor-94302 .elementor-element.elementor-element-eb295f4{--grid-columns:1;}.elementor-94302 .elementor-element.elementor-element-b8ef9b7 > .elementor-widget-container{padding:20px 0px 0px 0px;}.elementor-94302 .elementor-element.elementor-element-b8ef9b7.elementor-element{--align-self:center;}.elementor-94302 .elementor-element.elementor-element-b8ef9b7 .wpgb-facet > fieldset:last-child{margin-bottom:0;}.elementor-94302 .elementor-element.elementor-element-b8ef9b7 button.wpgb-button{background-color:var( --e-global-color-el_color_2_2 );margin:0px 0px 0px 0px;}.elementor-94302 .elementor-element.elementor-element-b8ef9b7 button.wpgb-button:not([disabled]):hover, .elementor-94302 .elementor-element.elementor-element-b8ef9b7 button.wpgb-button:not([disabled]):focus{background-color:var( --e-global-color-el_color_2 );}@media(max-width:1100px){.elementor-94302 .elementor-element.elementor-element-eb295f4{--grid-columns:2;}}@media(max-width:730px){.elementor-94302 .elementor-element.elementor-element-b99c2e0{--min-height:360px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-90px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-94302 .elementor-element.elementor-element-eb295f4{--grid-columns:1;}}/* Start custom CSS *//* ───────────────────────────────
   Paleta de colores por rareza
   ─────────────────────────────── */
:root {
  --clr-common:    #FFD700;
  --clr-rare:      #4dabf7;
  --clr-epic:      #32dc78;
  --clr-legendary: #f7a01e;
}

/* ───────────────────────────────
   Tarjeta base
   ─────────────────────────────── */
#item-card {
  --accent: rgba(255, 215, 0, 0.4);
  --accent-solid: var(--clr-common);

  background-color: #111 !important;
  border: 1px solid #333;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

#item-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 0 20px 6px var(--accent);
}

/* ─── Colores por rareza ─── */
#item-card.Common {
  --accent: rgba(255, 215, 0, 0.4);
  --accent-solid: #FFD700;
}
#item-card.Rare {
  --accent: rgba(77, 171, 247, 0.4);
  --accent-solid: #4dabf7;
}
#item-card.Epic {
  --accent: rgba(50, 220, 120, 0.4);
  --accent-solid: #32dc78;
}
#item-card.Legendary {
  --accent: rgba(247, 160, 30, 0.4);
  --accent-solid: #f7a01e;
}

/* ─── Evitar espacio vacío extra ─── */
#item-card .e-con-inner {
  flex-grow: 0 !important;
  height: auto !important;
}

/* ─── Espaciado entre bloques de nivel superior ─── */
#item-card > .elementor-element {
  margin-bottom: 12px;
}
#item-card > .description {
  margin-bottom: 0 !important;
}

/* ───────────────────────────────
   Bloque título + icono
   - Icono fijo
   - Título centrado en el espacio restante (icono → borde derecho)
   ─────────────────────────────── */
#item-card .title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* importante para centrar el título en el “resto” */
  gap: 10px;
  margin-bottom: 12px;
  width: 100%;
}

/* Contenedor del widget de imagen */
#item-card .title-row .elementor-widget-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
}

/* Imagen del ícono forzada a 80x80 */
#item-card .title-row .elementor-widget-image img {
  width: 80px;
  height: 80px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

/* Elementor suele meter el título como Heading o Text Editor.
   Hacemos que el “widget” ocupe el resto del ancho y centre el texto */
#item-card .title-row .elementor-widget-heading,
#item-card .title-row .elementor-widget-text-editor {
  flex: 1 1 auto;
  min-width: 0; /* evita cosas raras con flex */
  display: flex;
  justify-content: center;
}

/* Título */
#item-card .title-row h3 {
  margin: 0;
  padding: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  transition: color 0.25s;
  white-space: nowrap; /* evita que se rompa en vertical/letras */
}

#item-card:hover .title-row h3 {
  color: var(--accent-solid);
}

/* ───────────────────────────────
   Meta-datos
   ─────────────────────────────── */
#item-card .meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#item-card .meta-group-1,
#item-card .meta-group-2 {
  display: flex;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

/* Fila/columna base (Label + Valor) */
#item-card .meta-group-1 > .elementor-element,
#item-card .meta-group-2 > .elementor-element {
  display: flex !important;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#item-card .meta h6 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #ccc;
}

#item-card .meta .elementor-widget-text-editor {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-solid);
  white-space: nowrap;
}

/* ───────────────────────────────
   FIX: Access + Duration en 2 columnas 50/50 centradas
   (sin romper lo demás)
   ─────────────────────────────── */
#item-card .meta-group-1 {
  gap: 0 !important; /* quita el hueco “raro” */
  justify-content: space-between !important;
  width: 100% !important;
}

/* Elementor puede usar .elementor-element o .e-con-full como hijos */
#item-card .meta-group-1 > .elementor-element,
#item-card .meta-group-1 > .e-con-full {
  flex: 1 1 50% !important;   /* 50% cada uno */
  width: 50% !important;
  max-width: 50% !important;
  justify-content: center !important; /* centra el conjunto label+valor */
}

/* Centrado de texto dentro de cada mitad */
#item-card .meta-group-1 > .elementor-element *,
#item-card .meta-group-1 > .e-con-full * {
  text-align: center !important;
}

/* ───────────────────────────────
   Descripción
   ─────────────────────────────── */
#item-card .description {
  width: 100%;
}

#item-card .description .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

#item-card .description h6 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #ccc;
}

#item-card .description p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ccc;
}

/* ───────────────────────────────
   Responsive (móvil / tablet)
   ─────────────────────────────── */
@media (max-width:768px){

  /* 1 ▸ Título + icono en una sola línea */
  #item-card .title-row{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    text-align:left !important;
  }

  /* ⤷ limpiar gap de la fila de título */
  #item-card .title-row{
    gap:12px !important;
    row-gap:12px !important;
    column-gap:12px !important;
    --gap-row:12px !important;
    --gap-column:12px !important;
  }

  /* 2 ▸ Hijos directos sin ancho 100 % ni márgenes */
  #item-card .title-row > .e-con-full{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* 3 ▸ Icono 64 px */
  #item-card .title-row > .e-con-full:first-child{
    width:64px !important;
    height:64px !important;
    flex-shrink:0 !important;
    display:flex !important;
    justify-content:center;
    align-items:center;
  }
  #item-card .title-row > .e-con-full:first-child img{
    width:64px !important;
    height:64px !important;
    object-fit:contain !important;
  }

  /* 4 ▸ Contenedor de texto */
  #item-card .title-row > .e-con-full:nth-child(2){
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    margin:0 !important;
  }

  /* En móvil, el título NO va centrado al resto, va alineado a la izquierda */
  #item-card .title-row .elementor-widget-heading,
  #item-card .title-row .elementor-widget-text-editor{
    justify-content:flex-start !important;
  }

  #item-card .title-row h3{
    font-size:1.15rem !important;
    margin:0 !important;
    text-align:left !important;
    white-space:normal !important;
  }
  #item-card .title-row .elementor-widget-text-editor{
    font-size:0.85rem !important;
    margin:2px 0 0 0 !important;
  }

  /* 5 ▸ Bloques de meta-datos ----------------------- */
  #item-card .meta-group-1,
  #item-card .meta-group-2{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    row-gap:4px !important;
    column-gap:0 !important;
    --gap-row:4px !important;
    --gap-column:0px !important;
    margin:0 !important;
  }

  #item-card .meta-group-2{
    margin-top:12px !important;
  }

  /* 6 ▸ Fila individual (Label + Valor) */
  #item-card .meta-group-1 > .e-con-full,
  #item-card .meta-group-2 > .e-con-full{
    display:flex !important;
    justify-content:flex-start !important;
    gap:6px !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Respeta móvil: no 50/50 en columna */
  #item-card .meta-group-1 > .elementor-element,
  #item-card .meta-group-1 > .e-con-full{
    width:auto !important;
    max-width:none !important;
    flex:0 0 auto !important;
    justify-content:flex-start !important;
  }

  #item-card .meta-group-1 > .elementor-element *,
  #item-card .meta-group-1 > .e-con-full *{
    text-align:left !important;
  }

  /* 7 ▸ Labels h6 sin margen */
  #item-card h6{
    margin:0 !important;
  }

  /* 8 ▸ Descripción alineada y sin márgenes extra ---- */
  #item-card .description{
    align-items:flex-start !important;
    text-align:left !important;
    margin-top:16px !important;
  }
  #item-card .description > .e-con-full{
    margin:0 !important;
    padding:0 !important;
  }
}/* End custom CSS */