/** Shopify CDN: Minification failed

Line 8:0 Unexpected "<"
Line 584:2 Unexpected "<"
Line 1543:1 Expected "}" to go with "{"

**/
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Tienda – Estilo Moderno y Urbano</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Tienda de moda moderna y urbana" />

  <!-- Fuente elegante (opcional) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <style>
    /* ========== RESETEO BÁSICO ========== */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --color-bg: #050608;
      --color-bg-soft: #101218;
      --color-card: #151821;
      --color-primary: #e4b34f; /* dorado */
      --color-primary-soft: #f2d486;
      --color-text: #f7f7f7;
      --color-muted: #aaaaaa;
      --radius-lg: 18px;
      --shadow-soft: 0 18px 40px rgba(0,0,0,0.35);
      --transition-fast: 0.2s ease-out;
    }

    body {
      font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #111729 0, #050608 50%, #020308 100%);
      color: var(--color-text);
      line-height: 1.5;
      min-height: 100vh;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    /* ========== LAYOUT GENERAL ========== */
    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 16px 16px 40px;
    }

    @media (min-width: 768px) {
      .page {
        padding: 24px 24px 56px;
      }
    }

    /* ========== CABECERA ========== */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 18px;
      margin-bottom: 24px;
      background: rgba(10, 10, 15, 0.85);
      backdrop-filter: blur(18px);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: var(--shadow-soft);
      position: sticky;
      top: 10px;
      z-index: 10;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-mark {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #fffbe6 0, #f4c96f 28%, #c78b30 65%, #5a3a14 100%);
      border: 1px solid rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 18px;
      color: #151515;
      box-shadow: 0 9px 18px rgba(0, 0, 0, 0.6);
    }

    .logo-text-main {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .logo-text-sub {
      font-size: 11px;
      color: var(--color-muted);
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    nav {
      display: flex;
      gap: 12px;
      align-items: center;
      font-size: 13px;
    }

    nav a {
      padding: 6px 10px;
      border-radius: 999px;
      color: var(--color-muted);
      transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    }

    nav a:hover {
      background: rgba(255,255,255,0.06);
      color: var(--color-primary-soft);
      transform: translateY(-1px);
    }

    .pill-badge {
      font-size: 11px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--color-primary-soft);
      background: radial-gradient(circle at top left, rgba(245, 222, 179, 0.18), transparent 55%);
    }

    /* ========== BOTONES ========== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      border: 1px solid transparent;
      cursor: pointer;
      transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
      background: none;
      color: var(--color-text);
    }

    .btn-primary {
      background: linear-gradient(135deg, #f2d486 0%, #e4b34f 40%, #c6882c 100%);
      color: #111111;
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.55);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
    }

    .btn-outline {
      border-color: rgba(255,255,255,0.2);
      background: rgba(0,0,0,0.4);
      color: var(--color-text);
    }

    .btn-outline:hover {
      background: rgba(255,255,255,0.06);
      transform: translateY(-1px);
    }

    /* ========== SECCIÓN HERO ========== */
    .hero {
      display: grid;
      gap: 22px;
      margin-top: 20px;
      margin-bottom: 26px;
    }

    @media (min-width: 880px) {
      .hero {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: stretch;
      }
    }

    .hero-card {
      background: radial-gradient(circle at top left, #1d2233 0, #11131c 45%, #080910 100%);
      border-radius: 26px;
      padding: 22px 20px 22px;
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.16);
      font-size: 11px;
      color: var(--color-primary-soft);
      margin-bottom: 14px;
    }

    .hero-kicker span {
      font-size: 10px;
      padding: 2px 7px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--color-text);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .hero-title {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 8px;
    }

    @media (min-width: 768px) {
      .hero-title {
        font-size: 32px;
      }
    }

    .hero-title span {
      background: linear-gradient(120deg, #f7e8b5, #f0c761, #f2d486);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 13px;
      color: var(--color-muted);
      margin-bottom: 16px;
      max-width: 420px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      font-size: 11px;
      color: var(--color-muted);
    }

    .hero-metric {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .hero-metric strong {
      font-size: 14px;
      color: var(--color-primary-soft);
    }

    /* Lado derecho hero: “tarjeta visual” producto destacado */
    .hero-product {
      position: relative;
      border-radius: 26px;
      padding: 18px;
      background: radial-gradient(circle at bottom right, #202435 0, #121420 45%, #050608 100%);
      border: 1px solid rgba(255, 255, 255, 0.07);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .hero-product-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .hero-product-title {
      font-size: 14px;
      font-weight: 500;
    }

    .hero-product-tag {
      font-size: 11px;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: var(--color-primary-soft);
    }

    .hero-product-image {
      margin: 18px 0;
      border-radius: 20px;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      background: radial-gradient(circle at top left, rgba(244, 216, 126, 0.15), transparent 55%);
      min-height: 150px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-product-image::before {
      content: "";
      width: 160%;
      height: 160%;
      border-radius: 50%;
      position: absolute;
      top: -40%;
      right: -60%;
      background: radial-gradient(circle at center, rgba(228, 179, 79, 0.16), transparent 70%);
      pointer-events: none;
      opacity: 0.9;
    }

    .hero-product-shape {
      width: 150px;
      height: 70px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 0, #fffbe6 0, #f2d486 40%, #c6882c 90%);
      box-shadow:
        0 18px 36px rgba(0,0,0,0.65),
        0 -2px 6px rgba(255,255,255,0.15);
      position: relative;
    }

    .hero-product-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: var(--color-muted);
    }

    .hero-product-price strong {
      font-size: 18px;
      color: var(--color-primary-soft);
    }

    .hero-product-cta .btn {
      font-size: 12px;
      padding-inline: 12px;
    }

    /* ========== LISTA DE PRODUCTOS ========== */
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 12px;
      margin: 6px 2px 12px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 500;
    }

    .section-subtitle {
      font-size: 12px;
      color: var(--color-muted);
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 11px;
      justify-content: flex-end;
    }

    .filter-pill {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.1);
      color: var(--color-muted);
      cursor: pointer;
      transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
    }

    .filter-pill.active,
    .filter-pill:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.2);
      color: var(--color-primary-soft);
      transform: translateY(-1px);
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }

    @media (min-width: 768px) {
      .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
      }
    }

    .product-card {
      position: relative;
      background: radial-gradient(circle at top, #1a1d2a 0, #101218 40%, #06070b 100%);
      border-radius: 18px;
      padding: 10px;
      border: 1px solid rgba(255,255,255,0.06);
      box-shadow: 0 14px 30px rgba(0,0,0,0.6);
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow: hidden;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
    }

    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 22px 44px rgba(0,0,0,0.75);
      border-color: rgba(228, 179, 79, 0.35);
    }

    .product-badges {
      position: absolute;
      top: 9px;
      left: 9px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 2;
    }

    .badge {
      font-size: 10px;
      padding: 3px 7px;
      border-radius: 999px;
      background: rgba(0,0,0,0.68);
      border: 1px solid rgba(255,255,255,0.15);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .badge-gold {
      background: radial-gradient(circle at top, #f2d486, #c6882c);
      color: #141414;
      border-color: rgba(255,255,255,0.5);
    }

    .product-image-wrapper {
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      margin-bottom: 6px;
      background: radial-gradient(circle at top, rgba(255,255,255,0.09), transparent 60%);
      min-height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-img-placeholder {
      width: 80%;
      max-width: 140px;
      height: 70px;
      border-radius: 999px;
      background: radial-gradient(circle at 20% 0, #fffbe6 0, #f2d486 40%, #c6882c 95%);
      box-shadow:
        0 16px 32px rgba(0,0,0,0.8),
        0 -1px 4px rgba(255,255,255,0.18);
    }

    .product-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 12px;
    }

    .product-title {
      font-weight: 500;
      font-size: 12px;
    }

    .product-category {
      font-size: 11px;
      color: var(--color-muted);
    }

    .product-bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 4px;
      font-size: 11px;
    }

    .price {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .price-amount {
      font-weight: 600;
      color: var(--color-primary-soft);
      font-size: 14px;
    }

    .price-old {
      font-size: 10px;
      color: var(--color-muted);
      text-decoration: line-through;
    }

    .product-btn {
      font-size: 11px;
      padding: 6px 10px;
    }

    /* ========== PIE DE PÁGINA ========== */
    footer {
      margin-top: 12px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.06);
      font-size: 11px;
      color: var(--color-muted);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: space-between;
      align-items: center;
    }

    footer a {
      color: var(--color-muted);
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  </style>
</head>
<body>
  <div class="page">
    <!-- CABECERA -->
    <header>
      <div class="logo">
        <div class="logo-mark">E</div>
        <div>
          <div class="logo-text-main">Estilo Moderno y Urbano</div>
          <div class="logo-text-sub">Premium Street • Online</div>
        </div>
      </div>
      <nav>
        <a href="#novedades">Novedades</a>
        <a href="#hombre">Hombre</a>
        <a href="#mujer">Mujer</a>
        <span class="pill-badge">Envíos a todo EE. UU.</span>
      </nav>
    </header>

    <!-- HERO -->
    <main>
      <section class="hero">
        <div class="hero-card">
          <div class="hero-kicker">
            Lanzamiento oficial
            <span>Nuevo drop</span>
          </div>
          <h1 class="hero-title">
            Tu tienda <span>moderna y urbana</span> en un solo clic.
          </h1>
          <p class="hero-subtitle">
            Colecciones seleccionadas pieza por pieza, listas para reventa premium y contenido viral en redes.
          </p>

          <div class="hero-actions">
            <button class="btn btn-primary">
              Explorar colección
            </button>
            <button class="btn btn-outline">
              Ver ofertas del día
            </button>
          </div>

          <div class="hero-meta">
            <div class="hero-metric">
              <strong>+120</strong>
              <span>Productos listos para vender</span>
            </div>
            <div class="hero-metric">
              <strong>48 h</strong>
              <span>Despacho estimado</span>
            </div>
            <div class="hero-metric">
              <strong>Devoluciones fáciles</strong>
              <span>Para tus clientes finales</span>
            </div>
          </div>
        </div>

        <!-- Tarjeta visual producto destacado -->
        <aside class="hero-product">
          <div class="hero-product-header">
            <div>
              <div class="hero-product-title">Sudadera Premium “EMU Gold”</div>
              <small>Edición limitada · Unisex</small>
            </div>
            <div class="hero-product-tag">Destacado hoy</div>
          </div>

          <div class="hero-product-image">
            <div class="hero-product-shape"></div>
          </div>

          <div class="hero-product-footer">
            <div class="hero-product-price">
              <div>Desde</div>
              <strong>$54.99</strong>
            </div>
            <div class="hero-product-cta">
              <button class="btn btn-primary">
                Añadir al carrito
              </button>
            </div>
          </div>
        </aside>
      </section>

      <!-- LISTA DE PRODUCTOS -->
      <section id="novedades">
        <div class="section-header">
          <div>
            <h2 class="section-title">Novedades de hoy</h2>
            <p class="section-subtitle">Edita los productos a tu gusto: título, precio, descripción e imagen.</p>
          </div>
          <div class="filter-row">
            <div class="filter-pill active">Todo</div>
            <div class="filter-pill">Sudaderas</div>
            <div class="filter-pill">Sneakers</div>
            <div class="filter-pill">Accesorios</div>
          </div>
        </div>

        <div class="products-grid">
          <!-- PRODUCTO 1 -->
          <article class="product-card">
            <div class="product-badges">
              <span class="badge badge-gold">Nuevo</span>
              <span class="badge">Top ventas</span>
            </div>
            <div class="product-image-wrapper">
              <!-- Sustituye este placeholder por una <img> real -->
              <!-- <img src="TU_IMAGEN_1.jpg" alt="Sudadera EMU Gold"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Sudadera “EMU Gold” Oversize</h3>
              <p class="product-category">Unisex • Algodón pesado</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$54.99</span>
                  <span class="price-old">$69.99</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>

          <!-- PRODUCTO 2 -->
          <article class="product-card">
            <div class="product-badges">
              <span class="badge">Stock limitado</span>
            </div>
            <div class="product-image-wrapper">
              <!-- <img src="TU_IMAGEN_2.jpg" alt="Sneakers urbanos"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Sneakers urbanos “Midnight”</h3>
              <p class="product-category">Hombre • Edición cápsula</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$79.90</span>
                  <span class="price-old">$99.90</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>

          <!-- PRODUCTO 3 -->
          <article class="product-card">
            <div class="product-badges">
              <span class="badge">2x1 hoy</span>
            </div>
            <div class="product-image-wrapper">
              <!-- <img src="TU_IMAGEN_3.jpg" alt="Gorra premium"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Gorra Premium “Logo EMU”</h3>
              <p class="product-category">Accesorios • Ajustable</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$24.50</span>
                  <span class="price-old">$29.90</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>

          <!-- PRODUCTO 4 -->
          <article class="product-card">
            <div class="product-image-wrapper">
              <!-- <img src="TU_IMAGEN_4.jpg" alt="Set outfit completo"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Set completo “Street Night”</h3>
              <p class="product-category">Combo • Ahorro especial</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$129.00</span>
                  <span class="price-old">$159.00</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>

          <!-- PRODUCTO 5 -->
          <article class="product-card">
            <div class="product-badges">
              <span class="badge">Recomendado</span>
            </div>
            <div class="product-image-wrapper">
              <!-- <img src="TU_IMAGEN_5.jpg" alt="Pantalón cargo"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Pantalón cargo “Utility”</h3>
              <p class="product-category">Unisex • Street fit</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$49.99</span>
                  <span class="price-old">$59.99</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>

          <!-- PRODUCTO 6 -->
          <article class="product-card">
            <div class="product-image-wrapper">
              <!-- <img src="TU_IMAGEN_6.jpg" alt="Mochila urbana"> -->
              <div class="product-img-placeholder"></div>
            </div>
            <div class="product-info">
              <h3 class="product-title">Mochila urbana “Daily Move”</h3>
              <p class="product-category">Accesorios • Resistente</p>
              <div class="product-bottom-row">
                <div class="price">
                  <span class="price-amount">$39.90</span>
                  <span class="price-old">$49.90</span>
                </div>
                <button class="btn btn-primary product-btn">
                  Añadir
                </button>
              </div>
            </div>
          </article>
        </div>
      </section>
    </main>

    <!-- PIE -->
    <footer>
      <div>© 2025 Estilo Moderno y Urbano · Todos los derechos reservados.</div>
      <div class="footer-links">
        <a href="#">Política de envíos</a>
        <a href="#">Cambios y devoluciones</a>
        <a href="#">Contacto</a>
      </div>
    </footer>
  </div>
</body>
</html>/**************** CD1 – PALETA GENERAL JUDGE.ME ****************/
/* Colores de Estilo Moderno y Urbano: fondo oscuro + dorado */
:root {
  --emu-azul-oscuro: #050814;
  --emu-dorado: #c8a261;
  --emu-dorado-claro: #ffcc66;
  --emu-texto-claro: #f5f5f5;
  --emu-gris-borde: #272d3a;
}

/**************** CD2 – CONTENEDOR DEL REVIEW WIDGET ****************/
.jdgm-widget,
.jdgm-rev-widg {
  background: rgba(5, 8, 20, 0.95);      /* fondo oscuro */
  color: var(--emu-texto-claro);
  border-radius: 16px;
  border: 1px solid var(--emu-gris-borde);
  padding: 20px 24px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

/* Títulos del widget */
.jdgm-widget .jdgm-title,
.jdgm-rev-widg__title,
.jdgm-rev-widg__summary-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emu-dorado-claro);
}

/**************** CD3 – ESTRELLAS Y RESUMEN ****************/
.jdgm-star,
.jdgm-star.jdgm--on,
.jdgm-rev-widg__summary-stars .jdgm-star {
  color: var(--emu-dorado-claro);
}

/* Número de estrellas y promedio */
.jdgm-rev-widg__summary-average,
.jdgm-rev-widg__summary-text {
  color: var(--emu-texto-claro);
}

/* Barras de distribución */
.jdgm-histogram__bar {
  background: rgba(200, 162, 97, 0.25);
}
.jdgm-histogram__bar-inner {
  background: var(--emu-dorado);
}

/**************** CD4 – BOTONES Y ENLACES (ESCRIBIR RESEÑA, FILTROS) ****************/
/* Botón principal "Escribir una reseña" */
.jdgm-write-rev-link,
.jdgm-submit-rev,
.jdgm-btn {
  background: var(--emu-dorado);
  color: var(--emu-azul-oscuro);
  border-radius: 100px;
  border: none;
  padding: 10px 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jdgm-write-rev-link:hover,
.jdgm-submit-rev:hover,
.jdgm-btn:hover {
  background: var(--emu-dorado-claro);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(200, 162, 97, 0.55);
}

/* Links menores dentro de Judge.me */
.jdgm-link,
.jdgm-rev__author,
.jdgm-rev__timestamp {
  color: var(--emu-dorado-claro);
}

/**************** CD5 – CARDS DE CADA RESEÑA + RESPONSIVE ****************/
/* Tarjeta individual de reseña */
.jdgm-rev {
  background: rgba(10, 14, 32, 0.9);
  border-radius: 12px;
  border: 1px solid var(--emu-gris-borde);
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* Nombre del cliente y título de reseña */
.jdgm-rev__title {
  color: var(--emu-texto-claro);
  font-weight: 600;
}
.jdgm-rev__body {
  color: #d9d9d9;
}

/* Mobile ajustes */
@media (max-width: 749px) {
  .jdgm-widget,
  .jdgm-rev-widg {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .jdgm-write-rev-link,
  .jdgm-submit-rev,
  .jdgm-btn {
    width: 100%;
    text-align: center;
  }
}/**************** CD1 – PALETA GENERAL JUDGE.ME ****************/
/* Colores de Estilo Moderno y Urbano: fondo oscuro + dorado */
:root {
  --emu-azul-oscuro: #050814;
  --emu-dorado: #c8a261;
  --emu-dorado-claro: #ffcc66;
  --emu-texto-claro: #f5f5f5;
  --emu-gris-borde: #272d3a;
}

/**************** CD2 – CONTENEDOR DEL REVIEW WIDGET ****************/
.jdgm-widget,
.jdgm-rev-widg {
  background: rgba(5, 8, 20, 0.95);      /* fondo oscuro */
  color: var(--emu-texto-claro);
  border-radius: 16px;
  border: 1px solid var(--emu-gris-borde);
  padding: 20px 24px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
}

/* Títulos del widget */
.jdgm-widget .jdgm-title,
.jdgm-rev-widg__title,
.jdgm-rev-widg__summary-title {
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emu-dorado-claro);
}

/**************** CD3 – ESTRELLAS Y RESUMEN ****************/
.jdgm-star,
.jdgm-star.jdgm--on,
.jdgm-rev-widg__summary-stars .jdgm-star {
  color: var(--emu-dorado-claro);
}

/* Número de estrellas y promedio */
.jdgm-rev-widg__summary-average,
.jdgm-rev-widg__summary-text {
  color: var(--emu-texto-claro);
}

/* Barras de distribución */
.jdgm-histogram__bar {
  background: rgba(200, 162, 97, 0.25);
}
.jdgm-histogram__bar-inner {
  background: var(--emu-dorado);
}

/**************** CD4 – BOTONES Y ENLACES (ESCRIBIR RESEÑA, FILTROS) ****************/
/* Botón principal "Escribir una reseña" */
.jdgm-write-rev-link,
.jdgm-submit-rev,
.jdgm-btn {
  background: var(--emu-dorado);
  color: var(--emu-azul-oscuro);
  border-radius: 100px;
  border: none;
  padding: 10px 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.jdgm-write-rev-link:hover,
.jdgm-submit-rev:hover,
.jdgm-btn:hover {
  background: var(--emu-dorado-claro);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(200, 162, 97, 0.55);
}

/* Links menores dentro de Judge.me */
.jdgm-link,
.jdgm-rev__author,
.jdgm-rev__timestamp {
  color: var(--emu-dorado-claro);
}

/**************** CD5 – CARDS DE CADA RESEÑA + RESPONSIVE ****************/
/* Tarjeta individual de reseña */
.jdgm-rev {
  background: rgba(10, 14, 32, 0.9);
  border-radius: 12px;
  border: 1px solid var(--emu-gris-borde);
  padding: 16px 18px;
  margin-bottom: 14px;
}

/* Nombre del cliente y título de reseña */
.jdgm-rev__title {
  color: var(--emu-texto-claro);
  font-weight: 600;
}
.jdgm-rev__body {
  color: #d9d9d9;
}

/* Mobile ajustes */
@media (max-width: 749px) {
  .jdgm-widget,
  .jdgm-rev-widg {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .jdgm-write-rev-link,
  .jdgm-submit-rev,
  .jdgm-btn {
    width: 100%;
    text-align: center;
  }
}/*************** SISTEMA DE COLORES ***************/
:root {
  --emu-azul-oscuro: #050814;
  --emu-azul: #0c1124;
  --emu-azul-claro: #1a2340;
  --emu-dorado: #c8a261;
  --emu-dorado-claro: #ffcc66;
  --emu-texto: #f2f2f2;
  --emu-gris-borde: #262b35;
}

/*************** FONDO GLOBAL ***************/
body {
  background: var(--emu-azul-oscuro) !important;
  color: var(--emu-texto) !important;
}

/*************** BOTONES GLOBAL ****************/
button,
.shopify-payment-button__button,
.product-form__submit,
.cart__checkout-button,
.btn,
.button {
  background: var(--emu-dorado) !important;
  color: #050814 !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 24px !important;
  border: none !important;
}

button:hover,
.btn:hover,
.product-form__submit:hover,
.cart__checkout-button:hover {
  background: var(--emu-dorado-claro) !important;
  box-shadow: 0 0 12px rgba(200, 162, 97, 0.6);
  transform: translateY(-1px);
}

/*************** TARJETAS DE PRODUCTO ***************/
.card,
.card__inner,
.card-wrapper {
  background: var(--emu-azul-claro) !important;
  border-radius: 14px !important;
  border: 1px solid var(--emu-gris-borde) !important;
  box-shadow: 0 0 18px rgba(0,0,0,0.4) !important;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(200,162,97,0.25);
}

/*************** TÍTULOS ***************/
h1, h2, h3, h4, h5 {
  color: var(--emu-dorado-claro) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

/*************** ENCABEZADO / HEADER ***************/
.header,
.header__menu,
.menu-drawer {
  background: var(--emu-azul) !important;
  border-bottom: 1px solid var(--emu-gris-borde) !important;
}

.header__icon,
.header__active-menu-item {
  color: var(--emu
  /************ ASP — AJUSTE BARRA DORADA DE NAVEGACIÓN ************/
.ir-seccion,
.ir-directo,
.ir-info-producto {
  background: var(--emu-dorado) !important;
  color: var(--emu-azul-oscuro) !important;
  padding: 14px 22px !important;
  border-radius: 50px !important;
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  margin: 20px auto !important;
  width: fit-content !important;
  display: block !important;
  box-shadow: 0 0 18px rgba(200,162,97,0.3) !important;
}

/* Hover */
.ir-seccion:hover,
.ir-directo:hover,
.ir-info-producto:hover {
  background: var(--emu-dorado-claro) !important;
  transform: translateY(-2px);
  cursor: pointer;
}


/************ ASP — CENTRAR Y AJUSTAR BLOQUE DE JUDGEME ************/
.jdgm-widget,
.jdgm-rev-widg,
.jdgm-rev-widg__wrapper {
  max-width: 800px !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  padding: 30px 24px !important;
}

/* Centrar título y estrellas */
.jdgm-rev-widg__summary,
.jdgm-rev-widg__header,
.jdgm-widget .jdgm-title {
  text-align: center !important;
  margin-bottom: 18px !important;
}

/************ ASP — AJUSTE DE PADDING SUPERIOR ************/
.section-template--product .jdgm-widget {
  margin-top: 20px !important;
}

/* Quitar márgenes raros Shopify */
.shopify-section {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


/************ ASP — AJUSTE TARJETA DE RESEÑA ************/
.jdgm-rev {
  margin-bottom: 20px !important;
  border-radius: 16px !important;
  border: 1px solid var(--emu-gris-borde) !important;
  background: rgba(10, 14, 32, 0.85) !important;
}

.jdgm-rev__body {
  line-height: 1.55 !important;
}


/************ ASP — ESTRELLAS Y COLOR DEL TEXTO ************/
.jdgm-star,
.jdgm-star.jdgm--on {
  color: var(--emu-dorado-claro) !important;
}

.jdgm-rev__author,
.jdgm-rev__timestamp {
  color: var(--emu-dorado-claro) !important;
}

.jdgm-rev__title {
  color: var(--emu-texto) !important;
}



/************ ASP — RESPONSIVE ORO PURO ************/
@media (max-width: 749px) {
  .jdgm-widget,
  .jdgm-rev-widg,
  .jdgm-rev-widg__wrapper {
    padding: 20px 14px !important;
    border-radius: 12px !important;
  }

  .ir-seccion,
  .ir-directo,
  .ir-info-producto {
    width: 90% !important;
    font-size: 14px !important;
  }
}
 /******** HOME – ELIMINAR FONDO BLANCO DE FEATURED PRODUCTS ********/

/* Fuerza fondo oscuro en toda la home */
.template-index,
.template-index body,
.template-index .color-background-1,
.template-index .color-scheme-1,
.template-index .shopify-section {
  background: #050814 !important;
}

/* Quita panel blanco detrás de la sección destacada */
.template-index .featured-collection,
.template-index .featured-collection 
/******** HOME – APOGAR FONDO BLANCO DEFINITIVAMENTE ********/

/* Fondo general de la home */
.template-index,
.template-index body,
.template-index #MainContent {
  background-color: #050814 !important;
}

/* Cualquier sección con fondo "gradient" o esquema por defecto */
.template-index .shopify-section,
.template-index .gradient,
.template-index .color-background-1,
.template-index .color-scheme-1 {
  background-color: transparent !important;
}

/* Sección de colección destacada (Featured products) */
.template-index .featured-collection,
.template-index .featured-collection .gradient,
.template-index .featured-collection .section {
  background-color: transparent !important;
} 
 /**************** APAGAR EL FONDO BLANCO DE HOME — VERSIÓN DEFINITIVA ****************/

/* Fondo general del home */
.template-index,
.template-index body,
.template-index #MainContent {
  background: #050814 !important;
}

/* Todos los contenedores de secciones */
.template-index .shopify-section,
.template-index .shopify-section > div,
.template-index .shopify-section .section,
.template-index .shopify-section .section + div,
.template-index .color-background-1,
.template-index .color-scheme-1,
.template-index .gradient,
.template-index .content-for-index,
.template-index .page-width,
.template-index .page-width + * {
  background: transparent !important;
}

/* Featured products – todos los niveles */
.template-index .featured-collection,
.template-index .featured-collection *,
.template-index .featured-collection .color-background-1,
.template-index .featured-collection .color-background-2,
.template-index .featured-collection .section {
  background: trans/*********************
  ESTILO PREMIUM EMU
*********************/

/* Guard rails */
:root {
  --emu-dark: #050814;
  --emu-gold: #C8A261;
  --emu-gold-light: #FFDD99;
  --emu-card: #151b33;
  --emu-border: #262b35;
}

/* Fondo global oscuro */
body,
#MainContent,
.shopify-section {
  background: var(--emu-dark) !important;
}

/* Tarjetas premium */
.card,
.card-wrapper,
.card__inner {
  background: var(--emu-card) !important;
  border: 1px solid var(--emu-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 22px rgba(0,0,0,0.45) !important;
}

/* Animación en tarjetas */
.card:hover {
  transform: scale(1.02);
  transition: 0.25s ease;
}

/* Botón sólido premium */
.button,
.shopify-payment-button,
button.shopify-payment-button__button {
  background-color: var(--emu-gold) !important;
  color: var(--emu-dark) !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  border: none !important;
  transition: 0.25s ease !important;
}

.button:hover {
  background-color: var(--emu-gold-light) !important;
  color: #000 !important;
}

/* Botón contorno premium */
.button--secondary {
  border: 2px solid var(--emu-gold) !important;
  color: var(--emu-gold) !important;
  border-radius: 12px !important;
}

.button--secondary:hover {
  background-color: rgba(200,162,97,0.1) !important;
}

/* Títulos dorados */
h1, h2, h3, .title, .product__title, .section-title {
  color: var(--emu-gold-light) !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
}

/* Widget de reviews */
.jdgm-widget {
  background: var(--emu-card) !important;
  border-radius: 16px !important;
  border: 1px solid var(--emu-border) !important;
  padding: 25px !important;
}

/* Animación suave general */
* {
  scroll-behavior: smooth !important;
} parent !important;
} 
/**********************
  FOOTER PREMIUM EMU
***********************/

/* Fondo y estructura general */
.footer,
.footer__content-top,
.footer__content-bottom {
  background: #050814 !important;
  border-top: 1px solid #262b35 !important;
  padding-top: 28px !important;
  padding-bottom: 22px !important;
}

/* Texto general del footer */
.footer,
.footer a,
.footer p,
.footer small {
  color: #f5f5f5 !important;
  font-size: 13px !important;
}

/* Links del footer */
.footer a {
  text-decoration: none !important;
}
.footer a:hover {
  color: #ffdd99 !important;
}

/* Título "Subscribe to our emails" */
.footer-block--newsletter h2 
/********** HEADER MOBILE FIX **********/
@media (max-width: 749px) {
  header.header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .header__heading-logo-wrapper img,
  .header__heading-logo img {
    max-height: 42px !important;
    width: auto !important;
  }

  .header__menu-button {
    transform: scale(0.85) !important;
  }

  .header__icons {
    transform: scale(0.85) !important;
  }
} /************ ESTILO MODERNO Y URBANO — MOBILE OPTIMIZER ************/
@media (max-width: 749px) {

  /* Reduce la barra superior dorada */
  .announcement-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 12px !important;
  }

  /* Header reducido y elegante */
  header.header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Logo más compacto */
  .header__heading-logo-wrapper img,
  .header__heading-logo img {
    max-height: 40px !important;
    width: auto !important;
  }

  /* Botón de menú más pequeño */
  .header__menu-button {
    transform: scale(0.8) !important;
    margin-right: 2px !important;
  }

  /* Íconos más compactos */
  .header__icons {
    transform: scale(0.8) !important;
  }

  /* Ajusta la alineación vertical del header */
  .header__inline-menu,
  .header__heading,
  .header__icons {
    align-items: center !important;
  }/******** FOOTER EMU – REFINADO ********/

/* Compactar altura del footer */
.footer,
.footer__content-top,
.footer__content-bottom {
  padding-top: 18px !important;
  padding-bottom: 14px !important;
}

/* Texto general más fino y elegante */
.footer,
.footer p,
.footer small,
.footer__copyright,
.footer__copyright a {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #d7d7d7 !important;
}

/* Enlaces del footer */
.footer a {
  color: #f5f5f5 !important;
}
.footer a:hover {
  color: #ffdd99 !important;
}

/* Bloque de newsletter bien centrado */
.footer-block--newsletter {
  margin-bottom: 10px !important;
}
.footer-block--newsletter h2 {
  margin-bottom: 6px !important;
}

/* Input + botón más delgados */
.footer-block--newsletter .field__input {
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
.footer-block--newsletter .newsletter-form__button,
.footer-block--newsletter .field__button {
  height: 38px !important;
  padding: 8px 16
}