/* Diseño claro — canvas suave (no blanco puro) + tarjetas blancas con sombra suave, azul como
   único acento. Se aplica página por página agregando class="home-theme" al <body> (por ahora:
   inicio y ficha de producto) -- nunca toca el resto del sitio, que sigue en el tema oscuro. */

body.home-theme {
  --ht-ink: #1c2430;          /* texto principal */
  --ht-muted: #656f7d;        /* texto secundario */
  /* Los estilos en línea usan --text-muted, que es el gris del tema oscuro (#a0a0b8): sobre este
     fondo claro daba contraste 2,3:1 (mínimo WCAG 4,5:1). En tema claro apunta al gris propio. */
  --text-muted: var(--ht-muted);
  --ht-border: rgba(28, 36, 48, 0.08);  /* borde apenas visible, para definición sin dureza */
  --ht-accent: #2a70ca;       /* azul de acción único del sistema. Era #2f7de0 (contraste 4,09:1 con texto
                                 blanco y 3,75:1 como texto sobre el fondo): 10% más oscuro llega al 4,5:1 WCAG. */
  --ht-accent-2: #1a5bb8;     /* azul más oscuro, hover/estados */
  --ht-accent-wash: #eaf1fc;  /* fondo claro de badge/ícono */
  --ht-white: #ffffff;        /* superficie elevada: tarjetas, nav, botones ghost */
  --ht-canvas: #f4f5f8;       /* fondo real de la página -- gris azulado muy suave, no blanco puro */
  --ht-serif: 'Instrument Serif', Georgia, serif;
  --ht-display: 'Space Grotesk', var(--ht-serif), sans-serif;
  --ht-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --ht-shadow: 0 1px 2px rgba(28,36,48,0.04), 0 8px 24px rgba(28,36,48,0.05);
  --ht-shadow-hover: 0 2px 4px rgba(28,36,48,0.05), 0 14px 32px rgba(28,36,48,0.08);
}

body.home-theme { background: var(--ht-canvas); color: var(--ht-ink); }

/* ---------- Header: nav flotante en píldora blanca sobre el canvas ----------
   .site-header es sticky (top:0) en todo el sitio -- sin blur/transparencia, el contenido que
   pasa por debajo al hacer scroll queda cortado feo contra un bloque sólido. Con blur se desvanece
   suave, igual que hacía el header oscuro original. */
body.home-theme .site-header {
  background: color-mix(in srgb, var(--ht-canvas) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: none; box-shadow: none; padding-top: 20px;
}
body.home-theme .site-header .bar {
  background: var(--ht-white); border: none;
  border-radius: 28px; padding: 10px 20px; box-shadow: var(--ht-shadow);
}
body.home-theme .logo { color: var(--ht-ink); font-family: var(--ht-display); font-weight: 700; }
body.home-theme .nav-links a { color: var(--ht-muted); font-family: var(--ht-sans); font-weight: 500; }
body.home-theme .nav-links a:hover { color: var(--ht-ink); }
body.home-theme .cart-pill { border: none; background: var(--ht-canvas); color: var(--ht-ink); border-radius: 28px; }
body.home-theme .header-actions .btn-ghost { border: 1px solid var(--ht-border); background: transparent; color: var(--ht-ink); border-radius: 28px; }
body.home-theme .mobile-tabbar { background: color-mix(in srgb, var(--ht-white) 94%, transparent); border-top: 1px solid var(--ht-border); }
body.home-theme .mobile-tab { color: var(--ht-muted); }
body.home-theme .mobile-tab:hover, body.home-theme .mobile-tab.active { color: var(--ht-ink); }
body.home-theme .mobile-tab[aria-expanded="true"] { color: var(--ht-ink); }
body.home-theme .mobile-tab[aria-expanded="true"] svg { color: var(--ht-accent); }
body.home-theme .mobile-category-sheet { background: var(--ht-white); border: none; border-radius: 24px 24px 0 0; box-shadow: var(--ht-shadow-hover); }
body.home-theme .mobile-category-sheet a { color: var(--ht-ink); border-bottom-color: var(--ht-border); }
body.home-theme .mobile-sheet-backdrop { background: rgba(28, 36, 48, 0.4); }

/* ---------- Encabezados de sección ---------- */
body.home-theme .section-head-title h2 {
  color: var(--ht-ink); font-family: var(--ht-display); font-weight: 700; letter-spacing: -0.02em;
}

/* ---------- Cards de producto ---------- */
body.home-theme .card { background: var(--ht-white); border: none; border-radius: 20px; box-shadow: var(--ht-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease; }
body.home-theme .card:hover { transform: translateY(-3px); box-shadow: var(--ht-shadow-hover); }
body.home-theme .card-body h3 { color: var(--ht-ink); }
body.home-theme .card-price { color: var(--ht-ink); }
/* Las fotos de productos físicos vienen con fondo negro de estudio -- sin marco, ese negro llena
   toda la tarjeta y desentona por completo con el resto de la página. El padding + fondo blanco
   deja que se vea como una foto de producto enmarcada, no como un cuadro negro roto. */
body.home-theme .card-media { background: var(--ht-white); padding: 18px; border-bottom: 1px solid var(--ht-border); }
body.home-theme .card-media img { border-radius: 12px; }
body.home-theme .card:hover .card-media svg { filter: drop-shadow(0 12px 18px rgba(28, 36, 48, 0.2)); }
body.home-theme .tag {
  font-family: var(--ht-sans); font-size: 11px; font-weight: 500;
  background: var(--ht-accent-wash); color: var(--ht-accent-2); border-radius: 9999px; border: none;
}
body.home-theme .wishlist-btn { border-radius: 9999px; background: var(--ht-white); border: none; color: var(--ht-ink); box-shadow: var(--ht-shadow); }

/* ---------- Reseñas ---------- */
body.home-theme .review-card { background: var(--ht-white); border: none; border-radius: 20px; box-shadow: var(--ht-shadow); }
body.home-theme .review-stars { color: #f0a93a; }
body.home-theme .review-comment { color: var(--ht-ink); font-family: var(--ht-serif); font-size: 18px; }
body.home-theme .review-author { color: var(--ht-muted); }

/* ---------- Footer ---------- */
body.home-theme .site-footer { background: var(--ht-canvas); border-top: 1px solid var(--ht-border); color: var(--ht-muted); }
body.home-theme .site-footer .footer-heading { color: var(--ht-ink); font-family: var(--ht-display); font-weight: 700; }
body.home-theme .site-footer a { color: var(--ht-muted); }
body.home-theme .site-footer a:hover { color: var(--ht-accent); }
body.home-theme .site-footer .bottom { color: var(--ht-muted); border-top: 1px solid var(--ht-border); }

@media (max-width: 720px) {
  body.home-theme .site-header { padding-top: 12px; }
}

/* ---------- Botones genéricos (fuera del hero / banner, ej. ficha de producto) ---------- */
body.home-theme .btn { border-radius: 12px; font-family: var(--ht-sans); }
body.home-theme .btn-primary { background: var(--ht-accent); color: #fff; box-shadow: 0 6px 16px rgba(47,125,224,0.28); }
body.home-theme .btn-primary:hover { background: var(--ht-accent-2); box-shadow: 0 8px 20px rgba(47,125,224,0.32); }
body.home-theme .btn-ghost { background: var(--ht-white); border: none; color: var(--ht-ink); box-shadow: var(--ht-shadow); }
body.home-theme .btn-ghost:hover { color: var(--ht-accent); box-shadow: var(--ht-shadow-hover); }
body.home-theme .wishlist-btn-lg { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }

/* ---------- Ficha de producto ---------- */
/* El marco blanco de .card-media contra el canvas casi igual de claro apenas se distinguía --
   con solo la sombra no alcanzaba a leerse como "foto enmarcada". Un borde sutil lo deja claro. */
body.home-theme .product-detail .card-media { border: 1px solid var(--ht-border); box-shadow: var(--ht-shadow); }
body.home-theme .pd-thumbs { }
body.home-theme .pd-thumb { border: none; background: var(--ht-white); box-shadow: var(--ht-shadow); opacity: 0.7; }
body.home-theme .pd-thumb:hover { opacity: 1; }
body.home-theme .pd-thumb.active { opacity: 1; box-shadow: 0 0 0 2px var(--ht-accent); }
body.home-theme .product-detail h1 { font-family: var(--ht-display); font-weight: 700; letter-spacing: -0.015em; }
body.home-theme .product-price { font-family: var(--ht-display); font-weight: 700; color: var(--ht-ink); }
body.home-theme .product-desc { color: var(--ht-muted); }
body.home-theme .qty-row input { border: none; background: var(--ht-white); color: var(--ht-ink); box-shadow: var(--ht-shadow); }
body.home-theme .qty-row span { color: var(--ht-muted); }
body.home-theme .pd-trust span, body.home-theme .pd-signals span { color: var(--ht-muted); }
body.home-theme .pd-trust svg { color: var(--ht-accent-2); }
body.home-theme .plan-picker { }
body.home-theme .plan-option { border: none; background: var(--ht-white); box-shadow: var(--ht-shadow); }
body.home-theme .plan-option:hover { box-shadow: var(--ht-shadow-hover); }
body.home-theme .plan-option.active { background: var(--ht-accent-wash); box-shadow: 0 0 0 2px var(--ht-accent); }
body.home-theme .plan-option-label { color: var(--ht-ink); }
body.home-theme .plan-option-price { color: var(--ht-muted); }
body.home-theme .plan-option-permonth { color: var(--ht-accent-2); }
body.home-theme .delivery-note { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .delivery-note strong { color: var(--ht-ink); }
body.home-theme .delivery-note .desc { color: var(--ht-muted); }
body.home-theme .delivery-note.auto { border-left: 3px solid var(--ht-accent-2); }
body.home-theme .delivery-note.manual { border-left: 3px solid var(--ht-accent); }
body.home-theme .alert-error { background: #fdecec; color: #b42318; border: none; }
body.home-theme .field label { color: var(--ht-ink); }
body.home-theme .field input, body.home-theme .field select, body.home-theme .field textarea {
  background: var(--ht-white); border: 1px solid var(--ht-border); color: var(--ht-ink);
}
body.home-theme .field input:focus, body.home-theme .field select:focus, body.home-theme .field textarea:focus { border-color: var(--ht-accent); }

/* ---------- Resto del sitio: carrito, checkout, mi cuenta, formularios, páginas legales ---------- */

body.home-theme .card { background: var(--ht-white); }
body.home-theme .empty-state { color: var(--ht-muted); }
body.home-theme .alert { border: none; }
body.home-theme .alert-success { background: #eafaf0; color: #16794f; }
body.home-theme .alert-info { background: var(--ht-accent-wash); color: var(--ht-accent-2); }
body.home-theme .badge-status.status-pendiente, body.home-theme .badge-status.status-en_revision { background: #fef3c7; color: #92400e; }
body.home-theme .badge-status.status-pagado, body.home-theme .badge-status.status-entregado { background: #dcfce7; color: #166534; }
body.home-theme .badge-status.status-fallido, body.home-theme .badge-status.status-cancelado { background: #fee2e2; color: #991b1b; }

body.home-theme .form-card { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .form-foot { color: var(--ht-muted); }
body.home-theme .form-foot a { color: var(--ht-accent); }
body.home-theme .section-head a { color: var(--ht-accent); }
body.home-theme .search-suggestions { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow-hover); }

/* Carrito */
body.home-theme .cart-title { color: var(--ht-ink); font-family: var(--ht-display); }
body.home-theme .cart-subtitle { color: var(--ht-muted); }
body.home-theme .cart-clear-btn { border: none; background: var(--ht-white); color: var(--ht-muted); box-shadow: var(--ht-shadow); }
body.home-theme .cart-card { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .cart-media { background: var(--ht-canvas); }
body.home-theme .cart-name { color: var(--ht-ink); }
body.home-theme .cart-stepper { background: var(--ht-canvas); border: 1px solid var(--ht-border); }
body.home-theme .cart-step-btn { color: var(--ht-ink); }
body.home-theme .cart-step-btn:hover { background: var(--ht-border); }
body.home-theme .cart-stepper input[type="number"] { color: var(--ht-ink); }
body.home-theme .cart-unit-price { color: var(--ht-muted); }
body.home-theme .cart-subtotal-label { color: var(--ht-muted); }
body.home-theme .cart-subtotal-value { color: var(--ht-ink); }
body.home-theme .cart-remove-btn { color: var(--ht-muted); }
body.home-theme .cart-remove-btn:hover { background: var(--ht-canvas); color: var(--ht-ink); }
body.home-theme .cart-summary-bar { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .cart-summary-totals { color: var(--ht-muted); }
body.home-theme .cart-summary-totals strong { color: var(--ht-ink); }

/* Checkout / pay-* */
body.home-theme .pay-step-node { background: var(--ht-white); border-color: var(--ht-border); color: var(--ht-muted); box-shadow: var(--ht-shadow); }
body.home-theme .pay-step:not(:last-child)::after { background: var(--ht-border); }
body.home-theme .pay-step-label { color: var(--ht-muted); }
body.home-theme .pay-step.active .pay-step-label, body.home-theme .pay-step.done .pay-step-label { color: var(--ht-ink); }
body.home-theme .pay-ticket { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .pay-ticket-items .item { background: var(--ht-canvas); border: 1px solid var(--ht-border); }
body.home-theme .pay-ticket-items .item .name, body.home-theme .pay-ticket-items .item .price { color: var(--ht-ink); }
body.home-theme .pay-ticket-items .item .qty { background: var(--ht-white); color: var(--ht-muted); }
body.home-theme .pay-ticket-total { background: var(--ht-canvas); border-top: 1px solid var(--ht-border); border-left-color: var(--ht-accent); }
body.home-theme .pay-ticket-total .label { color: var(--ht-muted); }
body.home-theme .pay-card-face { background: var(--ht-white); border: 1.5px solid var(--ht-border); }
body.home-theme .pay-card-sub { color: var(--ht-muted); }
body.home-theme .pay-detail { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .pay-account { background: var(--ht-canvas); }
body.home-theme .pay-account-info p { color: var(--ht-muted); }
body.home-theme .proof-upload { background: var(--ht-canvas); border: 1px dashed var(--ht-border); }
body.home-theme .proof-upload-icon { background: var(--ht-white); box-shadow: var(--ht-shadow); }
body.home-theme .proof-upload-title { color: var(--ht-ink); }
body.home-theme .proof-upload-hint { color: var(--ht-muted); }
body.home-theme .pay-guarantee { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .pay-guarantee p { color: var(--ht-muted); }
body.home-theme .pay-trust { color: var(--ht-muted); }
body.home-theme .auth-tabs { background: var(--ht-canvas); }
body.home-theme .auth-tab { color: var(--ht-muted); }
body.home-theme .auth-tab.active { background: var(--ht-white); color: var(--ht-ink); box-shadow: var(--ht-shadow); }

/* Resultado del pago */
body.home-theme .result-card { background: var(--ht-white); border: none; box-shadow: var(--ht-shadow); }
body.home-theme .result-body p { color: var(--ht-muted); }
body.home-theme .result-body code { color: var(--ht-ink); }
body.home-theme .result-items { background: var(--ht-canvas); border: 1px solid var(--ht-border); }
body.home-theme .result-items .item { color: var(--ht-muted); }
body.home-theme .result-items .item span:last-child { color: var(--ht-ink); }
body.home-theme .result-secondary-link { color: var(--ht-muted); }
body.home-theme .result-secondary-link:hover { color: var(--ht-ink); }

/* Mis pedidos (mi-cuenta) */
body.home-theme .order-card { background: var(--ht-white); border: none; border-left: 3px solid var(--ht-border); box-shadow: var(--ht-shadow); }
body.home-theme .order-card.accent-green { border-left-color: #22c55e; }
body.home-theme .order-card.accent-amber { border-left-color: #eab308; }
body.home-theme .order-card.accent-red { border-left-color: #ef4444; }
body.home-theme .order-head { border-bottom: 1px solid var(--ht-border); }
body.home-theme .order-head .date { color: var(--ht-muted); }
body.home-theme .order-head .right .price { color: var(--ht-ink); }
body.home-theme .order-item-row { border-bottom: 1px solid var(--ht-border); }
body.home-theme .order-item-row .name { color: var(--ht-muted); }
body.home-theme .order-item-row .price { color: var(--ht-ink); }
body.home-theme .order-creds { border: 1px solid var(--ht-border); }
body.home-theme .order-creds-copy { color: var(--ht-muted); }
body.home-theme .order-creds-copy:hover { color: var(--ht-ink); background: var(--ht-canvas); }
body.home-theme .order-review-btn { color: var(--ht-muted); }
body.home-theme .order-foot { color: var(--ht-muted); }

/* ---------- Guía larga de la ficha de producto (Contenido SEO del admin) ---------- */
body.home-theme .product-guide {
  max-width: 780px; background: var(--ht-white); border-radius: 18px; box-shadow: var(--ht-shadow);
  padding: 34px 38px; color: var(--ht-ink); line-height: 1.7; font-size: 1rem;
}
body.home-theme .product-guide h2 { font-family: var(--ht-display); font-size: 1.3rem; margin: 30px 0 10px; }
body.home-theme .product-guide h2:first-child { margin-top: 0; }
body.home-theme .product-guide h3 { font-size: 1.02rem; margin: 20px 0 6px; }
body.home-theme .product-guide p { margin: 0 0 12px; color: #3a4452; }
body.home-theme .product-guide ul, body.home-theme .product-guide ol { margin: 0 0 14px; padding-left: 22px; color: #3a4452; }
/* ---------- Blog ---------- */
body.home-theme .blog-list { display: grid; gap: 16px; margin-top: 24px; }
body.home-theme .blog-card { padding: 24px 26px; }
body.home-theme .blog-card h2, body.home-theme .blog-card h3 { font-family: var(--ht-display); font-size: 1.18rem; margin: 0 0 6px; line-height: 1.35; }
body.home-theme .blog-card h2 a, body.home-theme .blog-card h3 a { color: var(--ht-ink); }
body.home-theme .blog-card h2 a:hover, body.home-theme .blog-card h3 a:hover { color: var(--ht-accent); }
body.home-theme .blog-card p { color: #3a4452; margin: 0 0 10px; line-height: 1.6; }
body.home-theme .blog-card .blog-card-date { color: var(--ht-muted); font-size: 0.82rem; margin-bottom: 8px; }
body.home-theme .blog-card-more { color: var(--ht-accent); font-weight: 600; font-size: 0.9rem; }
body.home-theme .blog-article { max-width: none; }
body.home-theme .blog-cta { margin: 24px 0 10px; padding: 26px; text-align: center; }
body.home-theme .blog-cta strong { font-family: var(--ht-display); font-size: 1.15rem; display: block; margin-bottom: 6px; }
body.home-theme .blog-cta p { color: #3a4452; margin: 0 0 16px; }

/* El reset global del sitio quita las viñetas de todo <ul>; en la guía son parte del contenido. */
body.home-theme .product-guide ul { list-style: disc; }
body.home-theme .product-guide ol { list-style: decimal; }
body.home-theme .product-guide li { margin-bottom: 6px; }
body.home-theme .product-guide a { color: var(--ht-accent); font-weight: 600; }
@media (max-width: 640px) {
  body.home-theme .product-guide { padding: 24px 20px; border-radius: 14px; }
  body.home-theme .product-guide h2 { font-size: 1.15rem; }
}