/*
Theme Name:   xstore-child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/
/* ===== Beneficios técnicos: toque de color + check fuera ===== */
:root{
  --bt-accent: #7f4fd8;   /* Cambia este color y listo */
  --bt-bg: rgba(0,0,0,.02);
  --bt-border: rgba(0,0,0,.08);
  --bt-text: rgba(0,0,0,.75);
}

.beneficios-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}

.beneficio{
  position:relative;
  padding:14px 16px 14px 48px; /* un pelín más por el check fuera */
  border:1px solid var(--bt-border);
  border-radius:12px;
  background: var(--bt-bg);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Check fuera, sin círculo */
.beneficio::before{
  content:"✓";
  position:absolute;
  left:14px;
  top:14px;
  font-weight:900;
  font-size:16px;
  line-height:1;
  color: var(--bt-accent);
  /* “soporte” sutil (no círculo) para que se lea bien en fondos claros */
  background: rgba(47,111,237,.12);
  padding: 4px 7px;
  border-radius: 999px; /* pill suave */
}

/* Acento de color en el lateral */
.beneficio::after{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius: 0 8px 8px 0;
  background: var(--bt-accent);
  opacity:.35;
}

.beneficio:hover{
  border-color: rgba(47,111,237,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.beneficio-titulo{
  font-weight:800;
  margin:0 0 6px 0;
  line-height:1.25;
}

.beneficio-texto{
  margin:0;
  line-height:1.55;
  color: var(--bt-text);
}

.beneficio-texto strong{
  color: rgba(0,0,0,.9);
}

/* Dos columnas en desktop */
@media (min-width: 780px){
  .beneficios-list{ grid-template-columns:1fr 1fr; }
}

/* Respeto a usuarios con “reducir movimiento” */
@media (prefers-reduced-motion: reduce){
  .beneficio{ transition:none; }
  .beneficio:hover{ transform:none; }
}


/* =========================
   TABLA: Características técnicas
   ========================= */

:root{
  --tec-accent:#7f4fd8;
  --tec-border:rgba(0,0,0,.10);
  --tec-text:rgba(0,0,0,.78);
  --tec-muted:rgba(0,0,0,.60);
  --tec-bg:rgba(0,0,0,.02);
}

/* Contenedor: no tan ancho + aspecto de ficha */
.tec-table-wrap{
  border:1px solid var(--tec-border);
  border-radius:12px;
  overflow:hidden;
  background:var(--tec-bg);
  max-width: 920px;   /* ↓ ajusta a tu gusto (p.ej. 840px) */
}

/* Tabla base */
table.tec-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size: .92rem;  /* más compacto */
}

/* Cabecera */
.tec-table thead th{
  text-align:left !important;
  padding:9px 12px !important;
  font-weight:800;
  color:rgba(0,0,0,.85);
  background: rgba(47,111,237,.08);
  border-bottom:1px solid rgba(47,111,237,.18);
}

.tec-table thead th:first-child{
  border-right:1px solid rgba(47,111,237,.12);
}

/* Celdas */
.tec-table tbody td{
  text-align:left !important;
  padding:8px 12px !important;
  vertical-align:top;
  color:var(--tec-text);
  border-bottom:1px solid var(--tec-border);
  line-height:1.35;
}

/* Última fila sin borde */
.tec-table tbody tr:last-child td{
  border-bottom:none;
}

/* Zebra muy suave */
.tec-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,.45);
}

/* Columna izquierda (clave) */
.tec-key{
  width: 36% !important;
  font-weight:700;
  color: var(--tec-muted);
  border-right:1px solid var(--tec-border);
  white-space: normal;
}

/* Columna derecha (valor) */
.tec-val{
  width: 64% !important;
  text-align:left !important; /* por si el tema la fuerza a la derecha */
}

.tec-val strong{
  color: rgba(0,0,0,.9);
}

/* Responsive móvil: filas apiladas */
@media (max-width: 640px){
  .tec-table-wrap{
    max-width: 100%;
  }

  .tec-table thead{
    display:none; /* en móvil no aporta mucho */
  }

  .tec-table tbody tr{
    display:block;
    padding:8px 0;
    border-bottom:1px solid var(--tec-border);
  }

  .tec-table tbody tr:last-child{
    border-bottom:none;
  }

  .tec-table tbody td{
    display:block;
    border-bottom:none;
    padding:6px 12px !important;
  }

  .tec-key{
    border-right:none;
    padding-bottom:2px !important;
    font-weight:800;
    color:rgba(0,0,0,.75);
  }

  .tec-val{
    padding-top:0 !important;
  }
}
:root{
  --doc-accent:#7f4fd8;
  --doc-border:rgba(0,0,0,.10);
  --doc-muted:rgba(0,0,0,.58);
  --doc-bg:rgba(0,0,0,.02);
}

.docs-group{ margin:0 0 18px 0; }
.docs-group-title{ font-weight:800; margin:0 0 10px 0; color:rgba(0,0,0,.82); }

.docs-grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .docs-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .docs-grid{ grid-template-columns:1fr 1fr 1fr; } }

.doc-card{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px solid var(--doc-border);
  border-radius:12px;
  background:var(--doc-bg);
  text-decoration:none !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.doc-card:hover{
  border-color: rgba(127,79,216,.35);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.doc-ic{
  flex:0 0 auto;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.06em;
  padding:6px 8px;
  border-radius:10px;
  color:#fff;
  background:var(--doc-accent);
}
.doc-meta{ min-width:0; flex:1 1 auto; }
.doc-title{ font-weight:800; color:rgba(0,0,0,.85); line-height:1.25; }
.doc-type{ margin-top:2px; font-size:.9rem; color:var(--doc-muted); }
.doc-cta{ flex:0 0 auto; font-weight:800; font-size:.9rem; color:var(--doc-accent); }