/* ==========================================================================
   Wazo — estilos de portada (front-page.php)
   --------------------------------------------------------------------------
   Porte literal de los <style> inline del home de Jumpseller
   (componentes custom-code-91001, custom-code-89299 y los estilos de las
   secciones theme-section), más los ajustes necesarios para que el mismo
   markup funcione con el loop de WooCommerce.

   app.min.css (CSS base del tema) sigue aportando: grid, .theme-section,
   .product-block, .article-block, .trustbar-block, .container, botones.
   Aquí NO se redefinen esas clases salvo los puentes de marca.

   Orden:
     1. Fuentes locales
     2. Tokens y escala tipográfica (WO TYPE SCALE 2026-10-02)
     3. Hero / SEO / banners
     4. Partners
     5. Puente secciones de tema (títulos, producto, trust, blog)
     6. Variables por sección (equivale a los <style> inline originales)
     7. Adaptaciones WooCommerce (loop de productos, blog, fallbacks)
     8. Accesibilidad y responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Tipografías
   Archivo Black + Karla las carga functions.php (handle 'wazo-fonts').
   No se declaran @font-face aquí a propósito: una cara local con un .woff2
   ausente tapa la cara válida de la misma familia y el navegador cae al
   fallback genérico. Ver NOTAS-HOME.md → "Tipografías".
-------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2) Tokens + escala tipográfica — scoped a los wrappers del home
-------------------------------------------------------------------------- */
#wo-page,
#wo-home-a,
#wo-partners-v3 {
  --navy: #2E376A;
  --navy2: #232B54;
  --green: #00B047;
  --green-ink: #00793E;
  --amber: #FFB41E;
  --ink: #1F2540;
  --gray: #5B6478;
  --line: #E3E7F0;
  --bg: #F5F7FB;
  --paper: #F7F9FC;
  --on-navy-muted: #C4CDE4;
  --badge-on-navy: #7DE8AC;

  --wo-font-display: 'Archivo Black', sans-serif;
  --wo-font-body: 'Karla', ui-sans-serif, system-ui, sans-serif;

  --wo-fs-display: clamp(1.875rem, 1.2rem + 2.5vw, 3rem);    /* 30–48 */
  --wo-fs-h1:      clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);    /* 28–40 */
  --wo-fs-h2:      clamp(1.5rem, 1.1rem + 1.4vw, 2rem);       /* 24–32 */
  --wo-fs-h3:      clamp(1.125rem, 1rem + 0.4vw, 1.25rem);    /* 18–20 */
  --wo-fs-lead:    clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* 17–18 */
  --wo-fs-body:    1rem;      /* 16 */
  --wo-fs-small:   0.875rem;  /* 14 */
  --wo-fs-chip:    0.75rem;   /* 12 */
  --wo-fs-eyebrow: 0.75rem;   /* 12 */

  --wo-lh-display: 1.08;
  --wo-lh-heading: 1.15;
  --wo-lh-h3: 1.25;
  --wo-lh-lead: 1.6;
  --wo-lh-body: 1.55;
  --wo-lh-small: 1.45;
  --wo-lh-chip: 1.2;

  --wo-ls-display: -0.01em;
  --wo-ls-eyebrow: 0.12em;
  --wo-ls-chip: 0.1em;

  --wo-fw-regular: 400;
  --wo-fw-medium: 500;
  --wo-fw-semibold: 600;
  --wo-fw-bold: 700;
  --wo-fw-extrabold: 800;

  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-body);
  line-height: var(--wo-lh-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Las variables --pb-padding / --pb-object-fit y el resto de la base vienen de
   assets/css/wazo-vars.css; aquí sólo se replica lo que en Jumpseller era
   propio de la portada. */

/* --------------------------------------------------------------------------
   Utility roles
-------------------------------------------------------------------------- */
#wo-page .wo-display,
#wo-home-a .wo-display,
#wo-partners-v3 .wo-display {
  font-family: var(--wo-font-display);
  font-weight: 400;
  letter-spacing: var(--wo-ls-display);
}

#wo-page .wo-eyebrow,
#wo-home-a .wo-eyebrow,
#wo-home-a .wo-badge,
#wo-partners-v3 .wo-badge {
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-eyebrow);
  font-weight: var(--wo-fw-extrabold);
  letter-spacing: var(--wo-ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--wo-lh-chip);
}

#wo-page .wo-h1,
#wo-home-a .wo-hero h1 {
  font-family: var(--wo-font-display);
  font-size: var(--wo-fs-display);
  font-weight: 400;
  line-height: var(--wo-lh-display);
  letter-spacing: var(--wo-ls-display);
}

#wo-page .wo-h2,
#wo-home-a .wo-h2,
#wo-partners-v3 .wo-h2 {
  font-family: var(--wo-font-display);
  font-size: var(--wo-fs-h2);
  font-weight: 400;
  line-height: var(--wo-lh-heading);
  letter-spacing: var(--wo-ls-display);
}

#wo-page .wo-h3,
#wo-home-a .banner-card h3,
#wo-page .kit-body h3,
#wo-page .feat-card h3,
#wo-page .blog-body h3 {
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-h3);
  font-weight: var(--wo-fw-extrabold);
  line-height: var(--wo-lh-h3);
  letter-spacing: normal;
  color: var(--navy);
}

#wo-page .wo-lead,
#wo-home-a .wo-hero-sub,
#wo-partners-v3 .wo-sub,
#wo-page .wo-sub {
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-lead);
  font-weight: var(--wo-fw-regular);
  line-height: var(--wo-lh-lead);
}

#wo-page .wo-body,
#wo-home-a .wo-seo-pos p,
#wo-home-a .banner-card p {
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-body);
  font-weight: var(--wo-fw-regular);
  line-height: var(--wo-lh-body);
  color: var(--gray);
}

#wo-page .wo-small {
  font-size: var(--wo-fs-small);
  line-height: var(--wo-lh-small);
  color: var(--gray);
}

#wo-page .wo-chip,
#wo-page .wo-chip-label,
#wo-partners-v3 .wo-chip-label {
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-chip);
  font-weight: var(--wo-fw-extrabold);
  letter-spacing: var(--wo-ls-chip);
  text-transform: uppercase;
  line-height: var(--wo-lh-chip);
}

/* --------------------------------------------------------------------------
   3) Hero / SEO / banners
-------------------------------------------------------------------------- */
#wo-home-a {
  --navy: #2E376A;
  --navy2: #232B54;
  --green: #00B047;
  --green-ink: #00793E;
  --amber: #FFB41E;
  --ink: #1F2540;
  --gray: #5B6478;
  --line: #E3E7F0;
  --bg: #F5F7FB;
  font-family: 'Karla', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

#wo-home-a .wo-hero {
  background:
    radial-gradient(circle at 85% 15%, rgba(0, 176, 71, .16) 0%, transparent 42%),
    radial-gradient(circle at 8% 90%, rgba(255, 180, 30, .12) 0%, transparent 38%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy2) 100%);
  padding: 56px clamp(20px, 4vw, 40px) 64px;
  position: relative;
  overflow: hidden;
}

#wo-home-a .wo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

#wo-home-a .wo-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items: center;
}

#wo-home-a .wo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 176, 71, .16);
  border: 1px solid rgba(0, 176, 71, .45);
  color: #7DE8AC;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}

#wo-home-a .wo-hero h1 {
  color: #fff;
  margin: 0 0 16px;
}

#wo-home-a .wo-flag {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.12em;
  font-style: normal;
  font-weight: 400;
}

#wo-home-a .wo-hero-sub {
  color: #C4CDE4;
  max-width: 520px;
  margin: 0 0 26px;
}

#wo-home-a .wo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}

#wo-home-a .wo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-ink);
  color: #fff !important;
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-body);
  font-weight: 800;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: 12px;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(0, 176, 71, .35);
}

#wo-home-a .wo-btn-ghost {
  background: transparent;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, .35);
  box-shadow: none;
  font-weight: 700;
}

#wo-home-a .hero-visual img {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35));
}

#wo-home-a .wo-seo-pos {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 40px) 8px;
}

#wo-home-a .wo-seo-pos .box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}

#wo-home-a .wo-seo-pos h2 {
  font-family: var(--wo-font-display);
  font-size: var(--wo-fs-h3);
  font-weight: 400;
  line-height: var(--wo-lh-h3);
  letter-spacing: var(--wo-ls-display);
  color: var(--navy);
  margin: 0 0 8px;
}

#wo-home-a .wo-seo-pos p {
  font-size: var(--wo-fs-body);
  line-height: var(--wo-lh-body);
  color: var(--gray);
  margin: 0;
}

#wo-home-a .wo-seo-pos a {
  color: var(--green-ink);
  font-weight: 700;
  text-decoration: underline;
}

/* Banner strip — 3 beneficios */
#wo-home-a .banner-strip {
  padding: 28px clamp(20px, 4vw, 40px) 8px;
  background: #fff;
}

#wo-home-a .banner-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

#wo-home-a .banner-card {
  border: 1px solid #E3E7F0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
}

/* BANNER CROP A 2026-10-03 */
#wo-home-a .bc-well {
  height: 220px;
  background: #F5F7FB;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#wo-home-a .bc-shot {
  width: min(300px, 100%);
  height: 220px;
  position: relative;
  overflow: hidden;
  flex: none;
}

#wo-home-a .bc-shot img {
  position: absolute;
  max-width: none;
  object-fit: cover;
  background: none;
}

#wo-home-a .bc-shot.bc-think img { width: 128.19%; height: 177.2%; left: -24.8%;  top: -19.2%; }
#wo-home-a .bc-shot.bc-envio img { width: 127.89%; height: 177.2%; left: -8.67%;  top: -15.2%; }
#wo-home-a .bc-shot.bc-heart img { width: 127.89%; height: 177.2%; left: -21.87%; top: -11.2%; }

#wo-home-a .banner-card .bc-body { padding: 16px 18px 20px; }

#wo-home-a .banner-card h3 {
  font-weight: 800;
  margin: 0 0 6px;
  color: #2E376A;
  font-family: 'Karla', sans-serif;
}

#wo-home-a .banner-card p {
  color: #5B6478;
  margin: 0;
  font-size: var(--wo-fs-small);
  line-height: var(--wo-lh-small);
  font-family: 'Karla', sans-serif;
}

/* --------------------------------------------------------------------------
   4) Partners
-------------------------------------------------------------------------- */
#wo-partners-v3 {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 64px;
}

#wo-partners-v3 .wo-partners-band {
  background:
    radial-gradient(circle at 90% 20%, rgba(0, 176, 71, .18) 0%, transparent 45%),
    radial-gradient(circle at 10% 80%, rgba(255, 180, 30, .10) 0%, transparent 40%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy2) 100%);
  border-radius: 20px;
  padding: 48px clamp(24px, 4vw, 48px) 44px;
  position: relative;
  overflow: hidden;
}

#wo-partners-v3 .wo-partners-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}

#wo-partners-v3 .inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

#wo-partners-v3 .wo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 176, 71, .16);
  border: 1px solid rgba(0, 176, 71, .45);
  color: #7DE8AC;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

#wo-partners-v3 .wo-h2 {
  color: #fff;
  margin: 0 0 12px;
  font-family: var(--wo-font-display);
  font-size: var(--wo-fs-h2);
  font-weight: 400;
  line-height: var(--wo-lh-heading);
  letter-spacing: var(--wo-ls-display);
}

#wo-partners-v3 .wo-sub {
  color: #C4CDE4;
  max-width: 560px;
  margin: 0 auto 36px;
  font-family: var(--wo-font-body);
  font-size: var(--wo-fs-lead);
  font-weight: 400;
  line-height: var(--wo-lh-lead);
}

#wo-partners-v3 .wo-partner-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

#wo-partners-v3 .wo-partner-card {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px; /* SIN ETIQUETAS 2026-10-16 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
}

#wo-partners-v3 .wo-partner-card img {
  max-height: 100px;
  max-width: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* TECNOEVEI 2026-10-16 — grilla 4 desktop / 2 tablet / 1 móvil */
@media (max-width: 1024px) {
  #wo-partners-v3 .wo-partner-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  #wo-partners-v3 { padding: 32px 16px 48px; }
  #wo-partners-v3 .wo-partner-row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5) Puente secciones de tema
   Activo en el original. Scope: títulos/subtítulos/cards latest+featured,
   trust, blog. No catálogo / Periféricos.
-------------------------------------------------------------------------- */
#theme-section-latest-products .theme-section__title,
#theme-section-featured-products .theme-section__title,
#theme-section-page-category-articles-53519 .theme-section__title {
  font-family: 'Archivo Black', sans-serif !important;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: #2E376A !important;
}

#theme-section-latest-products .theme-section__subtitle,
#theme-section-featured-products .theme-section__subtitle,
#theme-section-page-category-articles-53519 .theme-section__subtitle {
  font-family: 'Karla', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #00793E !important;
  line-height: 1.2 !important;
}

#theme-section-latest-products .product-block__name,
#theme-section-featured-products .product-block__name {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #1F2540 !important;
}

#theme-section-latest-products .product-block__price,
#theme-section-featured-products .product-block__price {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #2E376A !important; /* precio: navy, no gris lavado */
}

#theme-section-trust-bar-1 .trustbar-block__title {
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}

#theme-section-trust-bar-1 .trustbar-block__text {
  font-size: 0.875rem !important;
  line-height: 1.45 !important;
  color: #C4CDE4 !important;
}

#theme-section-page-category-articles-53519 .article-block__title {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #1F2540 !important;
}

/* --------------------------------------------------------------------------
   6) Variables por sección
   Equivalen a los <style> inline que traía cada componente en Jumpseller.
-------------------------------------------------------------------------- */
#theme-section-latest-products,
#theme-section-featured-products {
  --theme-max-width: 1320px;
  --section-margin-top: 48px;
  --section-margin-bottom: 48px;
  --section-margin-top-mobile: 48px;
  --section-margin-bottom-mobile: 48px;
  --theme-overlay-opacity: 0.5;
}

#theme-section-trust-bar-1 {
  --theme-max-width: 1620px;
  --section-margin-top: 32px;
  --section-margin-bottom: 32px;
  --section-margin-top-mobile: 32px;
  --section-margin-bottom-mobile: 32px;
  --color-border-opacity: 0.1;
}

#theme-section-page-category-articles-53519 {
  --theme-max-width: 1620px;
  --section-margin-top: 48px;
  --section-margin-bottom: 48px;
  --section-margin-top-mobile: 48px;
  --section-margin-bottom-mobile: 48px;
}

/* --------------------------------------------------------------------------
   7) Adaptaciones WooCommerce
-------------------------------------------------------------------------- */

/* Imagen de producto: el thumb de WooCommerce es cuadrado y se recorta */
#wo-page .product-block__image {
  object-fit: var(--pb-object-fit, cover);
}

/* Precio anterior (oferta) */
#wo-page .product-block__price--old {
  display: inline-block;
  margin-right: 6px;
  color: #8A93A8 !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  text-decoration: line-through;
}

#wo-page .product-block__price--text {
  display: block;
  color: #5B6478 !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  font-style: normal;
}

/* El precio de wc_price() viene envuelto en spans: que hereden el estilo de card */
#wo-page .product-block__price .woocommerce-Price-amount,
#wo-page .product-block__price bdi {
  color: inherit;
  font: inherit;
}

/* Botón de agregar al carro: hereda el color de botón principal del tema
   (--color-button-main-bg) y sólo se fuerza el contraste del icono. */
#wo-page .product-block__button--add-to-cart {
  color: #fff !important;
  cursor: pointer;
}

#wo-page .product-block__button--add-to-cart .theme-icon {
  color: #fff;
}

#wo-page .product-block__actions--on-hover {
  transition: opacity .25s ease-in-out;
}

/* CTA de sección: color de marca (el tema base lo deja en --color-secondary) */
#wo-page .theme-section__link {
  font-weight: 700;
  color: #00793E !important;
  text-decoration: none;
}

#wo-page .theme-section__link:hover {
  border-bottom-color: #00793E !important;
}

/* Fechas del blog en Karla, tono gris del tema */
#wo-page .article-block__date {
  color: #5B6478;
  font-family: var(--wo-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Placeholders: se muestran sólo cuando el asset/foto aún no existe, para
   que la maqueta no quede con imágenes rotas. Ver NOTAS-HOME.md.
-------------------------------------------------------------------------- */
#wo-home-a .wo-nophoto {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 380 / 386;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, .28);
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
}

#wo-home-a .bc-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #EAF0F9, #F5F7FB);
}

#wo-partners-v3 .wo-partner-name {
  font-family: var(--wo-font-body);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2E376A;
  text-align: center;
}

#wo-page .article-block__img-fallback {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #EAF0F9, #F5F7FB);
}

/* --------------------------------------------------------------------------
   8) Accesibilidad y responsive
-------------------------------------------------------------------------- */
#wo-page a:focus-visible,
#wo-home-a a:focus-visible,
#wo-partners-v3 a:focus-visible {
  outline: 3px solid #2E376A;
  outline-offset: 2px;
}

@media (pointer: coarse), (max-width: 768px) {
  #wo-home-a input,
  #wo-home-a select,
  #wo-home-a textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 900px) {
  #wo-home-a .wo-hero-inner { grid-template-columns: 1fr; }
  #wo-home-a .hero-visual { order: -1; }
  #wo-home-a .banner-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reducción de movimiento
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #wo-page *,
  #wo-home-a *,
  #wo-partners-v3 * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}