/* Soy Gamer Digital — overrides de marca.
   El motor (cart_drawer.php, vo-cart.css, pages/404.php, vo-btn en general) consume estas
   variables; sin ellas el botón "Continuar" del carrito y los vo-btn quedan sin color.
   Mapeadas al acento rojo del theme de la demo martial-arts (--cnvs-themecolor en
   css/martial-arts/martial-arts.css) para que el carrito combine con el resto del sitio. */
:root {
  --brand-sand:    #CC1616;
  --brand-black:   #080808;
  --brand-white:   #FFFFFF;
  --brand-muted:   #777777;
  --brand-border:  #E5E5E5;
  --brand-surface: #F4F4F4;
  /* Tipografías del sitio (las mismas que fija martial-arts.css para body/headings):
     sin esto Canvas deja sus defaults "Inter"/"Playfair Display", que acá no se cargan,
     y todo lo que las consume (page-title, textos del listado) cae en Arial. */
  --cnvs-body-font:      'DM Sans', sans-serif;
  --cnvs-primary-font:   'Oswald', sans-serif;
  --cnvs-secondary-font: 'DM Sans', sans-serif;
}

/* Páginas internas de tienda (listado/detalle de productos): el fondo es blanco a propósito,
   pero el theme oscuro de la demo define el color de texto base claro (--cf-text #E8E8E8) y
   los nombres, filtros y links del aside quedaban blanco sobre blanco. Se pisa solo dentro de
   estos contenedores (la home y las secciones oscuras no se tocan). */
#VOConteiner,
#VOContainerDetail,
#VOContainerContent {
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
/* Aire antes del footer: el my-md-4 del .content-wrap colapsa por fuera del #content blanco
   (sin padding), así que sin paginación la última fila de tarjetas quedaba pegada al footer. */
#VOContainerContent { padding-bottom: 3rem; }
#VOConteiner a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary),
#VOContainerDetail a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary),
#VOContainerContent a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary) { color: #333; }
#VOConteiner a:not(.vo-quick-add):hover,
#VOContainerDetail a:not(.vo-quick-add):hover,
#VOContainerContent a:not(.vo-quick-add):hover { color: var(--brand-sand); }
#VOConteiner :is(h1, h2, h3, h4, h5, h6),
#VOContainerDetail :is(h1, h2, h3, h4, h5, h6),
#VOContainerContent :is(h1, h2, h3, h4, h5, h6) { color: #111; }
#VOConteiner .vo-card-brand a,
#VOContainerContent .vo-card-brand a { color: var(--brand-sand); }
#VOConteiner .vo-card-name,
#VOContainerDetail .vo-card-name,
#VOContainerContent .vo-card-name { color: #1a1a1a; }

/* Cart drawer (core/includes/partials/cart_drawer.php): fondo blanco como en el resto de
   la tienda, pero hereda el texto claro del theme oscuro — título, nombre, precio y
   subtotal quedaban blanco sobre blanco. Mismo criterio que los contenedores de arriba. */
#cartDrawer {
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
#cartDrawer :is(h1, h2, h3, h4, h5, h6),
#cartDrawer .vo-cart-item-name,
#cartDrawer .vo-cart-item-name a,
#cartDrawer .vo-cart-item-price,
#cartDrawer .vo-cart-subtotal .amount,
#cartDrawer .vo-qty-val { color: #111; }
#cartDrawer .vo-cart-item-name a:hover { color: var(--brand-sand); }
#cartDrawer .vo-cart-checkout:hover { background: var(--brand-sand); }

/* Página del carrito (core/carrito/index.php, #VOCarrito): mismo problema — fondo blanco
   con el texto claro del theme oscuro, así que los títulos (Tus datos, Forma de pago,
   Tu pedido...), labels y descripciones de las formas de pago/envío no se veían. */
#VOCarrito {
  --vo-cart-sticky-top: 160px; /* header fijo (~137px) + aire, ver .vo-sticky-checkout-summary en vo-cart.css */
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
#VOCarrito :is(h1, h2, h3, h4, h5, h6),
#VOCarrito .form-label,
#VOCarrito .form-check-label,
#VOCarrito dt { color: #111; }
#VOCarrito a:not(.vo-btn):not(.vo-btn-primary):not(.alert-link) { color: #333; }
#VOCarrito a:not(.vo-btn):not(.vo-btn-primary):hover { color: var(--brand-sand); }

/* Tarjetas de producto: core/assets/vo-contents.css fuerza un recorte panorámico
   (aspect-ratio: 8/5, pensado para las fotos de indumentaria de Elisee) sin importar el
   tamaño que pida configImg — con nuestras imágenes de códigos/tarjetas digitales (recorte
   500x800, ver CONFIG_IMG_LISTADO en config.inc.php) eso tapaba la mitad de abajo de la
   tarjeta (el texto "2800 POINTS", etc). Como el servidor ya entrega siempre el mismo recorte
   (500x800, igual que el sitio anterior), se anula el aspect-ratio y el object-fit y la imagen
   se muestra a su tamaño real — mismo criterio que las tarjetas de la home. */
/* (más específico que el core: vo-contents.css se carga después de este archivo) */
.vo-product-card .vo-card-img-wrap { aspect-ratio: auto; }
.vo-product-card .vo-card-img-wrap img.img-primary { aspect-ratio: auto; height: auto; object-fit: initial; }
.vo-product-card .vo-card-img-wrap img.img-hover { aspect-ratio: auto; }

/* Bloques "Novedades"/"Destacados" de la home: reusan la estética de las tarjetas de
   instructors.php (.cf-instructor-card) a pedido — la tarjeta original es un <div> sin link;
   acá es un <a>. La imagen de producto ya viene recortada 500x800 desde el servidor
   (CONFIG_IMG_LISTADO, siempre el mismo tamaño), así que no hace falta forzar un
   aspect-ratio/object-fit en el CSS (esos venían de .cf-instructor-img, pensado para fotos
   de instructor 3:4, y terminaban recortando la imagen del lado del cliente encima del
   recorte del servidor) — se pisan y se deja que la imagen se muestre a su tamaño real. */
a.cf-instructor-card { display: block; text-decoration: none; color: inherit; }
a.cf-instructor-card:hover { text-decoration: none; color: inherit; }
/* aspect-ratio explícito (no "auto"): con auto se pierde la reserva de espacio que dan
   width/height del <img> y la grilla salta al cargar (CLS). 5/8 = 500x800 de CONFIG_IMG_LISTADO;
   los relacionados de la ficha llegan a 320x480 (2/3, config del bloque related del core). */
.sgd-feat-img { aspect-ratio: 5 / 8; width: 100%; height: auto; object-fit: initial; }
.em-related-products .sgd-feat-img { aspect-ratio: 2 / 3; }
.sgd-feat-old { opacity: 0.55; margin-right: 0.35rem; }
.sgd-feat-card { height: 100%; }

/* Stats band (home): igual, adaptado a 4 links de redes sociales en vez de stats de la
   demo — .cf-stats-inner ya era un <div>, acá cada item es un <a>. */
.cf-social-stat { text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; }
.cf-social-stat:hover { text-decoration: none; opacity: 0.85; transform: translateY(-3px); }
.cf-social-stat .cf-stat-num { font-size: 2rem; }

/* Hero: la demo martial-arts trae una foto de gimnasio de fondo (CDN de la demo) —
   la reemplazamos por un fondo generado en CSS, sin depender de una foto con derechos ajenos. */
.cf-hero-bg {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(204,22,22,0.25) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(204,22,22,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #141414 60%, #0a0a0a 100%);
  background-size: cover;
}

/* Perks band (home) */
.sgd-perks { background: #0a0a0a; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sgd-perk-icon { font-size: 2rem; color: var(--brand-sand); display: block; margin-bottom: 1rem; }
.sgd-perk-title { font-family: 'Oswald', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 0.5rem; }
.sgd-perk-text { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }

/* Category cards (home) */
.sgd-categories { background: #111; }
.sgd-categories h2 { color: #fff; }
.sgd-categories .color { color: var(--brand-sand) !important; }
.col-lg-2-4 { flex: 0 0 auto; width: 20%; }
@media (max-width: 991.98px) { .col-lg-2-4 { width: 33.3333%; } }
@media (max-width: 575.98px) { .col-lg-2-4 { width: 50%; } }
.sgd-cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 2rem 1rem; height: 100%;
  background: #181818; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
  text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease;
}
.sgd-cat-card:hover { border-color: var(--brand-sand); transform: translateY(-3px); }
.sgd-cat-card i { font-size: 2.2rem; color: var(--brand-sand); }
.sgd-cat-card span { font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }

/* Páginas interiores (contacto, etc.): el theme de la demo pone #content/#wrapper en
   blanco por default (pensado para que cada sección de la demo original pusiera su propio
   fondo oscuro) — el resto del sitio es oscuro, así que acá también lo forzamos para no
   quedar con texto blanco sobre blanco. */
#content.sgd-dark-section { background-color: #0a0a0a !important; }
.sgd-dark-section .fbox-content h3 span.subtitle { color: rgba(255,255,255,0.6); }

/* Página de contacto: mismo look que el partial contact.php de la demo martial-arts,
   con los estilos inline de la demo pasados a clases. */
.sgd-contact-lead { color: var(--cf-muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 2rem; }
.sgd-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.sgd-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 575.98px) { .sgd-contact-grid { grid-template-columns: 1fr; } }
.sgd-contact-label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-muted); }
.sgd-contact-input {
  width: 100%; padding: 0.75rem 1rem; outline: none;
  background: var(--cf-dark2); border: 1px solid var(--cf-border); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; transition: border-color 0.2s;
}
.sgd-contact-input:focus { border-color: var(--cnvs-themecolor); }
.sgd-contact-input::placeholder { color: #777; }
textarea.sgd-contact-input { resize: vertical; }
.sgd-contact-alert { display: flex; gap: 12px; align-items: flex-start; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.92rem; line-height: 1.6; color: #fff; }
.sgd-contact-alert i { font-size: 1.2rem; line-height: 1.4; }
.sgd-contact-alert-ok { background: rgba(25,135,84,0.12); border: 1px solid rgba(25,135,84,0.5); }
.sgd-contact-alert-ok i { color: #2fbf71; }
.sgd-contact-alert-error { background: rgba(var(--cnvs-themecolor-rgb),0.1); border: 1px solid rgba(var(--cnvs-themecolor-rgb),0.45); }
.sgd-contact-alert-error i { color: var(--cnvs-themecolor); }
.sgd-contact-card { padding: 2rem; margin-bottom: 1.5rem; background: var(--cf-dark2); border: 1px solid var(--cf-border); }
.sgd-contact-card-accent { background: rgba(var(--cnvs-themecolor-rgb),0.08); border-color: rgba(var(--cnvs-themecolor-rgb),0.25); }
.sgd-contact-card-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; margin-bottom: 1.2rem; color: #fff; }
.sgd-contact-card .cf-footer-contact-item a { color: inherit; font-size: 0.9rem; }
.sgd-contact-card .cf-footer-contact-item a:hover { color: var(--cnvs-themecolor); }
.sgd-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sgd-contact-list li { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--cf-muted); }
.sgd-contact-list i { color: var(--cnvs-themecolor); }
.sgd-contact-eyebrow { font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-muted); margin-bottom: 0.8rem; }

/* Header: logo + buscador destacado + whatsapp/ofertas/carrito, con la barra de
   categorías debajo (layout pedido: referencia Frávega para el buscador, referencia
   Canvas demo-construction para la barra de categorías bajo el header). */
#header-wrap { background-color: #0a0a0a; }

.sgd-header-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.sgd-header-logo { flex-shrink: 0; order: 1; }

.sgd-search-form {
  order: 3;
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.sgd-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.7rem 1rem;
  color: #fff;
  font-size: 0.9rem;
}
.sgd-search-input::placeholder { color: rgba(255,255,255,0.4); }
.sgd-search-input:focus { outline: none; } /* el foco se marca en el form entero (.sgd-search-form:focus-within) */
.sgd-search-btn {
  background: var(--brand-sand);
  border: none;
  color: #fff;
  padding: 0 1.2rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.sgd-search-btn:hover { background: #a30f0f; }

.sgd-header-icons { order: 2; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; margin-left: auto; }
.sgd-header-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.05rem;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.sgd-header-icon:hover { border-color: var(--brand-sand); color: var(--brand-sand); }
/* Mismo estilo "cinta" angulada que .btn-cf-primary (botón "Free Trial Class" de la
   demo), a tamaño de header — ver clip-path en css/martial-arts/martial-arts.css. */
.sgd-header-offers {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-sand);
  color: #fff;
  padding: 0 1.4rem 0 1.1rem;
  height: 42px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.sgd-header-offers:hover {
  background: var(--cf-red-dark, #991010);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(204,22,22,0.45);
}

.sgd-cat-bar { background: #111; border-top: 1px solid rgba(255,255,255,0.07); }
/* display:flex solo en desktop (.is-expanded-menu): en mobile Canvas oculta el menú y lo
   muestra al tocar el botón de las 3 rayitas; forzar flex acá lo dejaba siempre visible. */
.sgd-cat-nav .menu-container {
  margin: 0;
  padding: 0;
  list-style: none;
}
.is-expanded-menu .sgd-cat-nav .menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
/* Tamaño igual al menú de la demo original (HOME/DISCIPLINES/SCHEDULE/...): 13px,
   weight 700, line-height 22px. */
.sgd-cat-nav .menu-item > a {
  display: block;
  padding: 0.85rem 1.1rem;
  color: rgba(255,255,255,0.72);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sgd-cat-nav .menu-item > a > div { display: inline; }
.sgd-cat-nav .menu-item > a:hover,
.sgd-cat-nav .menu-item.current > a { color: var(--brand-sand); }

@media (min-width: 768px) {
  .sgd-header-row { flex-wrap: nowrap; }
  .sgd-search-form { order: 2; flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
  .sgd-header-icons { order: 3; margin-left: 0; }
}

/* Listado sin resultados: core/assets/vo-aside.css usa 'Cormorant Garamond' (fuente de
   Elisee/Trihada) para el título, que este sitio no carga — se pasa a la tipografía de
   títulos del sitio (Oswald). */
#VOConteiner .vo-no-results-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* ── Ficha de producto (vo/resources/templates/shop/detail.php) ───────────
   Portada acotada a la izquierda + bloque de compra; abajo descripción y consulta.
   Los links van con #VOContainerContent para ganarle al color:#333 genérico de arriba. */
.sgd-detail { padding-top: 10px; }
.sgd-detail-cover {
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.sgd-detail-cover img { display: block; height: auto; } /* height:auto: el <img> lleva width/height (500x800) para reservar espacio */
.sgd-detail-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sgd-detail-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid #eee; }

.sgd-detail-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#VOContainerContent .sgd-detail-cat {
  font-family: var(--cnvs-primary-font);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-sand);
  font-weight: 600;
}
.sgd-detail-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 30px; background: #111; color: #fff;
}
.sgd-detail-pill-red { background: var(--brand-sand); }

.sgd-detail-title {
  font-family: var(--cnvs-primary-font);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sgd-detail-specs {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.sgd-detail-specs li {
  background: #f4f4f4; border-left: 3px solid var(--brand-sand);
  border-radius: 4px; padding: 8px 12px; line-height: 1.3;
}
.sgd-detail-specs span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #777; }
.sgd-detail-specs strong, #VOContainerContent .sgd-detail-specs a { font-weight: 700; color: #111; }
#VOContainerContent .sgd-detail-specs a:hover { color: var(--brand-sand); }

.sgd-detail-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sgd-detail-price s { color: #999; font-size: 1.1rem; }
.sgd-detail-price-main { font-family: var(--cnvs-primary-font); font-size: 2.2rem; font-weight: 700; color: #111; line-height: 1; }
.sgd-detail-cuotas { color: #555; margin-bottom: 0; }

.sgd-detail-form { margin-top: 20px; }
.sgd-detail-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-bottom: 4px; }
.sgd-detail-buy-row { display: flex; gap: 10px; }
.sgd-detail-qty { width: 80px; flex: 0 0 80px; text-align: center; }
.sgd-detail-buy-btn { flex: 1 1 auto; max-width: 360px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sgd-detail-nostock { margin-top: 20px; color: var(--brand-sand); font-weight: 600; }

.sgd-detail-perks { list-style: none; padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid #eee; }
.sgd-detail-perks li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #444; }
.sgd-detail-perks i { color: var(--brand-sand); font-size: 1.1rem; }
.sgd-detail-loc-text { font-size: .85rem; color: #777; margin-top: 10px; }

.sgd-detail-bottom { margin-top: 0; padding-top: 10px; border-top: 1px solid #eee; }
.sgd-detail > .row:first-child { padding-bottom: 36px; }
.sgd-detail-h2 { font-family: var(--cnvs-primary-font); font-size: 1.4rem; text-transform: uppercase; margin-bottom: 14px; }
.sgd-detail-text { color: #444; line-height: 1.7; }
.sgd-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
#VOContainerContent .sgd-detail-tags a {
  font-size: .78rem; padding: 4px 12px; border-radius: 30px; background: #f1f1f1; color: #333; text-transform: capitalize;
}
#VOContainerContent .sgd-detail-tags a:hover { background: var(--brand-sand); color: #fff; }
.sgd-detail-contact { background: #111; color: #ccc; border-radius: 10px; padding: 28px; }
#VOContainerContent .sgd-detail-contact .sgd-detail-h2 { color: #fff; }
.sgd-detail-contact strong { color: #fff; }
.sgd-detail-contact .form-control { background: #1c1c1c; border-color: #333; color: #fff; }
.sgd-detail-contact .form-control::placeholder { color: #888; }

@media (min-width: 992px) {
  .sgd-detail-contact { position: sticky; top: 100px; }
}
@media (max-width: 767.98px) {
  .sgd-detail-cover { max-width: 240px; }
  .sgd-detail-buy-btn { max-width: none; }
}
.sgd-detail .vo-btn-primary, .sgd-detail .vo-btn-primary:hover { color: #fff; }
.sgd-detail .vo-btn-primary:hover { background: #a80f0f; border-color: #a80f0f; }
/* La regla genérica "#VOContainerContent a:not(...):not(...):not(...)" les gana en especificidad. */
#VOContainerContent .sgd-detail a.sgd-detail-cat { color: var(--brand-sand) !important; }
#VOContainerContent .sgd-detail-specs a:hover,
#VOContainerContent .sgd-detail-tags a:hover { color: var(--brand-sand) !important; }
#VOContainerContent .sgd-detail-tags a:hover { background: #f1f1f1; }

/* ── Slider de la home (includes/partials/home_slider.php) ─────────────────
   <picture> con fuente desktop (1200x675) y mobile (600x675): el <img> lleva width/height
   para reservar el espacio, así que el alto tiene que ser auto o queda fijo en 675px. */
.sgd-home-slider picture { display: block; }
.sgd-home-slider .slider-wrap picture img { display: block; width: 100%; height: auto; }

/* ── Mobile: sin overflow horizontal ───────────────────────────────────────
   Canvas deja .content-wrap con padding horizontal 0, y en listados, ficha y carrito esa
   clase va en el mismo div que .container (core/vo/src/Contenido.php): las .row con sus
   márgenes negativos se salían 12px de la pantalla. Igual que sites/inene/css/inene.css. */
.content-wrap.container {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
/* El botón "Filtrar productos" (mobile) va directo en la .row del listado, con sus
   márgenes negativos: se lo devuelve al ancho de las columnas. */
@media (max-width: 767.98px) {
  #VOConteiner > .vo-filters-toggle-btn {
    width: calc(100% - var(--bs-gutter-x, 1.5rem));
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  }
}

/* ── Accesibilidad ─────────────────────────────────────────────────────── */
/* Foco visible con teclado (el theme lo saca en varios lados). Blanco porque casi todo el
   sitio es oscuro; en las zonas de fondo blanco (tienda, carrito) se usa el rojo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#VOConteiner :is(a, button, input, select, textarea):focus-visible,
#VOContainerContent :is(a, button, input, select, textarea):focus-visible,
#VOCarrito :is(a, button, input, select, textarea):focus-visible,
#cartDrawer :is(a, button, input, select, textarea):focus-visible { outline-color: #b31212; }
.sgd-detail-contact :is(a, button, input, textarea):focus-visible { outline-color: #fff; }
/* Buscador del header: el input no muestra outline propio, se marca el form entero. */
.sgd-search-form:focus-within { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

/* Contraste: texto blanco en todos los botones primarios (antes solo en la ficha). */
.vo-btn-primary, .vo-btn-primary:hover, .vo-btn-primary:focus { color: #fff; }
/* Texto chico rojo sobre fondo oscuro: #CC1616 da ~3.4:1 sobre #0a0a0a/#111 — se usa un
   rojo más claro (#ff4d4d, ~6:1) en eyebrows ("Categorías"), menú activo/hover, etiqueta de
   plataforma de las tarjetas y etiqueta roja del footer. Botones y fondos siguen con el rojo de marca. */
.cf-section-eyebrow,
.sgd-categories .color,
.cf-tag-red,
.cf-instructor-title,
.sgd-cat-nav .menu-item > a:hover,
.sgd-cat-nav .menu-item.current > a { color: #ff4d4d !important; }

/* ── reCAPTCHA ─────────────────────────────────────────────────────────── */
/* El badge flotante tapaba contenido en mobile: se oculta y se muestra la leyenda que exige
   Google junto al botón de envío (includes/partials/recaptcha_lazy.php). */
.grecaptcha-badge { visibility: hidden; }
.sgd-recaptcha-legal { margin: .75rem 0 0; font-size: .75rem; line-height: 1.5; color: rgba(255,255,255,.6); }
.sgd-recaptcha-legal a { color: inherit; text-decoration: underline; }
#VOContainerContent .sgd-recaptcha-legal a { color: rgba(255,255,255,.8); }
/* Honeypot anti-spam de los forms (campo "website", ver core/procesar.php): fuera de vista pero
   no display:none, para que los bots que solo llenan campos visibles en el DOM también caigan. */
.sgd-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Restos de la demo ─────────────────────────────────────────────────── */
/* Marca de agua "FREE TRIAL" de martial-arts.css detrás del banner rojo de la home. */
.cf-trial-banner::before { content: '100% DIGITAL'; }

/* ── Footer: botón de arrepentimiento (Res. 424/2020, visible desde la home) ── */
#copyrights .sgd-arrepentimiento-btn, .sgd-arrepentimiento-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem 1rem; border: 1px solid rgba(255,255,255,.55); border-radius: 4px;
  color: #fff !important; /* martial-arts.css fuerza "#copyrights a" en rojo con !important */ font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
#copyrights .sgd-arrepentimiento-btn:hover, .sgd-arrepentimiento-btn:hover { background: var(--brand-sand); border-color: var(--brand-sand); color: #fff !important; }

/* ── Páginas legales / ayuda (pages/terminos.php, privacidad.php, arrepentimiento.php,
   preguntas-frecuentes.php, como-comprar.php) ─────────────────────────────── */
.sgd-legal { color: rgba(255,255,255,.78); line-height: 1.75; font-size: .95rem; }
.sgd-legal h2 { font-family: 'Oswald', sans-serif; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; color: #fff; margin: 2rem 0 .75rem; }
.sgd-legal h3 { font-size: 1rem; color: #fff; margin: 1.5rem 0 .5rem; }
.sgd-legal a { color: #ff4d4d; }
.sgd-legal a:hover { color: #fff; }
.sgd-legal ul, .sgd-legal ol { padding-left: 1.2rem; }
.sgd-legal li { margin-bottom: .4rem; }
.sgd-legal-updated { font-size: .8rem; color: rgba(255,255,255,.5); }
.sgd-legal-box { background: var(--cf-dark2, #161616); border: 1px solid var(--cf-border, rgba(255,255,255,.1)); padding: 1.5rem; margin: 1.5rem 0; }