/* ============================================================
   AGPHES – global.css
   Clases reutilizables para widgets HTML de Elementor.
   Prefijo: as-  (agphes)
   ============================================================ */

/* ── HEROES ─────────────────────────────────────────────── */
.as-hero {
  padding-top: calc(var(--topbar-height, 34px) + var(--header-height, 72px) + 5rem);
  padding-bottom: 5rem;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #fff;
  text-align: center;
}

.as-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(90, 39, 16, 0.60);
  z-index: 0;
}

.as-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.as-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.as-hero p  { color: rgba(255,255,255,0.88); font-size: 1.1rem; max-width: 600px; margin: 1rem auto 0; }

/* ── SECCIÓN GENÉRICA ────────────────────────────────────── */
.as-section         { padding: 5rem 0; }
.as-section-sm      { padding: 3rem 0; }
.as-section-light   { background-color: var(--color-secondary); }
.as-section-white   { background-color: #fff; }
.as-section-dark    { background-color: #1F2937; color: #fff; }
.as-section-primary { background-color: var(--color-primary); color: #fff; }

.as-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── ENCABEZADOS DE SECCIÓN ──────────────────────────────── */
.as-section-header       { margin-bottom: 3rem; }
.as-section-header.center { text-align: center; }

.as-overline {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.as-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.as-section-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 600px;
  line-height: 1.7;
}
.as-section-header.center .as-section-subtitle { margin: 0 auto; }

/* ── DIVIDER ─────────────────────────────────────────────── */
.as-divider {
  width: 60px; height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 1rem 0 1.5rem;
}
.as-section-header.center .as-divider { margin: 1rem auto 1.5rem; }

/* ── GRIDS ───────────────────────────────────────────────── */
.as-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.as-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.as-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.as-grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; align-items: center; }
.as-grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; }

@media (max-width: 1024px) {
  .as-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .as-grid-2, .as-grid-3, .as-grid-4,
  .as-grid-2-1, .as-grid-1-2 {
    grid-template-columns: 1fr;
  }
}

/* ── CARDS ───────────────────────────────────────────────── */
.as-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.as-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.as-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  display: block;
}

.as-card-body { padding: 1.5rem; }

.as-card-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

.as-card-text {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.as-card-full {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
.as-card-full:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ── BADGE ───────────────────────────────────────────────── */
.as-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.as-badge-primary { background: var(--color-primary); color: #fff; }
.as-badge-accent  { background: var(--color-accent); color: #fff; }
.as-badge-light   { background: var(--color-secondary); color: var(--color-primary-dark); }
.as-badge-success { background: #D1FAE5; color: #065F46; }

/* ── ÍCONOS ──────────────────────────────────────────────── */
.as-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
}
.as-icon-wrap svg { width: 26px; height: 26px; }
.as-icon-primary { background: rgba(151,71,35,0.12); color: var(--color-primary); }
.as-icon-accent  { background: rgba(230,81,0,0.12);  color: var(--color-accent); }
.as-icon-success { background: rgba(22,163,74,0.12); color: #16A34A; }
.as-icon-white   { background: rgba(255,255,255,0.18); color: #fff; }

/* ── FEATURE ITEMS (icono + texto) ──────────────────────── */
.as-feature {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.as-feature-text h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.35rem;
}
.as-feature-text p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; }

/* ── STEPS (pasos numerados) ─────────────────────────────── */
.as-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.as-step-number {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}
.as-step-body h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.3rem;
}
.as-step-body p { font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; }

/* ── STATS ───────────────────────────────────────────────── */
.as-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.as-stat  { text-align: center; }
.as-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.as-stat-label { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.25rem; }

/* ── CTA BANNER ──────────────────────────────────────────── */
.as-cta {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: var(--radius-lg);
}
.as-cta h2 { color: #fff; }
.as-cta p  { color: rgba(255,255,255,0.85); max-width: 560px; margin: 1rem auto 2rem; }

/* ── TESTIMONIAL ─────────────────────────────────────────── */
.as-testimonial {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-primary);
}
.as-testimonial blockquote {
  font-size: 1rem;
  color: var(--color-text-main);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 1rem;
}
.as-testimonial cite {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  font-style: normal;
}

/* ── GALERÍA GRID ────────────────────────────────────────── */
.as-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.as-gallery img {
  width: 100%; height: 180px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.as-gallery img:hover { opacity: 0.85; transform: scale(1.02); }

@media (max-width: 768px) {
  .as-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .as-gallery { grid-template-columns: 1fr; }
}

/* ── IMAGEN CON OVERLAY ──────────────────────────────────── */
.as-img-overlay {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.as-img-overlay img { width: 100%; display: block; }
.as-img-overlay .as-overlay-badge {
  position: absolute;
  bottom: 1rem; left: 1rem;
  background: var(--color-primary);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* ── FORMULARIO ──────────────────────────────────────────── */
.as-form { background: #fff; padding: 2.5rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.as-form label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.4rem;
}
.as-form input,
.as-form textarea,
.as-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-main);
  background: var(--color-bg);
  transition: border-color 0.2s;
  outline: none;
  box-sizing: border-box;
}
.as-form input:focus,
.as-form textarea:focus { border-color: var(--color-primary); }
.as-form .as-field { margin-bottom: 1.25rem; }

/* ── DONACIÓN / PAGO ─────────────────────────────────────── */
.as-donate-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  text-align: center;
}
.as-donate-card h3 { color: var(--color-primary-dark); margin-bottom: 0.5rem; }
.as-bank-num {
  font-family: monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 2px;
  margin: 0.5rem 0;
}

/* ── CONTADOR ANIMADO ────────────────────────────────────── */
.as-counter { text-align: center; }
.as-counter-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: #25D366;
  line-height: 1;
}
.as-counter-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* ── UTILIDADES EXTRA ────────────────────────────────────── */
.as-flex     { display: flex; }
.as-flex-center { display: flex; align-items: center; justify-content: center; }
.as-gap-4    { gap: 1rem; }
.as-gap-8    { gap: 2rem; }
.as-rounded  { border-radius: var(--radius-md); }
.as-rounded-lg { border-radius: var(--radius-lg); }
.as-shadow   { box-shadow: var(--shadow-md); }
.as-w-full   { width: 100%; }
.as-text-sm  { font-size: 0.88rem; }
.as-text-lg  { font-size: 1.1rem; }
.as-fw-bold  { font-weight: 700; font-family: var(--font-heading); }
.as-mt-4     { margin-top: 1rem; }
.as-mt-8     { margin-top: 2rem; }
.as-mb-4     { margin-bottom: 1rem; }
.as-mb-8     { margin-bottom: 2rem; }
.as-p-6      { padding: 1.5rem; }
.as-p-8      { padding: 2rem; }

/* ============================================================
   WOOCOMMERCE – LOOP TIENDA AGPHES
   ============================================================ */

/* Contenedor principal */
.woocommerce-page #primary,
.woocommerce #primary { max-width: 1200px; margin: 0 auto; padding: 3rem 1.5rem; }

/* Ocultar elementos nativos de WooCommerce que no usamos */
.woocommerce-products-header,
.woocommerce-ordering,
.woocommerce-result-count,
.woocommerce .woocommerce-notices-wrapper { display: none !important; }

/* ── Filtros de categoría ── */
.tienda-filtros {
  display: flex !important; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center; margin-bottom: 2.5rem;
}
.tienda-filtro {
  display: inline-block;
  padding: 0.5rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--color-border);
  background: #fff; color: var(--color-text-muted);
  font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600;
  text-decoration: none !important; transition: all 0.2s; cursor: pointer;
  line-height: 1.4;
}
.tienda-filtro:hover { color: var(--color-primary) !important; border-color: var(--color-primary); }
.tienda-filtro.activo { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary); }

/* ── Grid de productos ── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  padding: 0 !important; margin: 0 !important;
  list-style: none !important; float: none !important;
  clear: both !important;
}
/* Neutralizar clases first/last/clear que WooCommerce inyecta */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
  clear: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
/* Forzar que el primer producto arranque en columna 1 */
.woocommerce ul.products li.product:first-child,
.woocommerce ul.products li.product.first {
  grid-column-start: 1 !important;
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* ── Card de producto ── */
.woocommerce ul.products li.product {
  background: #fff !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important;
  float: none !important; width: auto !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Imagen */
.woocommerce ul.products li.product a img {
  width: 100% !important; height: 220px !important;
  object-fit: cover !important; display: block !important;
  border-radius: 0 !important; margin: 0 !important;
}
/* Ocultar badge de "sale" */
.woocommerce ul.products li.product .onsale { display: none !important; }

/* Precio */
.woocommerce ul.products li.product .price {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important; font-size: 1rem !important;
  color: var(--color-primary-dark) !important;
  padding: 1rem 1.25rem 0 !important; margin: 0 !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none !important; }

/* Nombre producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-heading) !important;
  font-size: 0.88rem !important; font-weight: 700 !important;
  color: var(--color-text-main) !important;
  padding: 0.4rem 1.25rem 0.75rem !important; margin: 0 !important;
  flex-grow: 1;
}

/* ── Botón WhatsApp ── */
.woocommerce ul.products li.product a.button {
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 0.5rem !important;
  margin: auto 1.25rem 1.25rem !important;
  padding: 0.7rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-primary) !important;
  color: #fff !important; border: none !important;
  font-family: var(--font-heading) !important;
  font-size: 0.85rem !important; font-weight: 700 !important;
  text-decoration: none !important; transition: background 0.2s !important;
  box-shadow: none !important;
}
.woocommerce ul.products li.product a.button:hover {
  background: var(--color-primary-dark) !important; color: #fff !important;
  transform: none !important;
}

/* ── Paginación ── */
.woocommerce nav.woocommerce-pagination { margin-top: 2.5rem; }
.woocommerce nav.woocommerce-pagination ul {
  display: flex; justify-content: center; gap: 0.4rem;
  flex-wrap: wrap; list-style: none; padding: 0; margin: 0; border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; padding: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-width: 38px; height: 38px; padding: 0 0.6rem;
  border-radius: var(--radius-sm) !important; border: 2px solid var(--color-border) !important;
  background: #fff !important; color: var(--color-text-muted) !important;
  font-family: var(--font-heading) !important; font-size: 0.9rem !important; font-weight: 600 !important;
  text-decoration: none !important; transition: all 0.2s !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--color-primary) !important; color: var(--color-primary) !important;
  background: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary) !important; border-color: var(--color-primary) !important; color: #fff !important;
}