/* 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;
}

/* 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). La proporción correcta es la del recorte del sitio
   anterior: 500:800 = 5:8. */
.vo-card-img-wrap,
.vo-card-img-wrap img {
  aspect-ratio: 5/8;
}

/* 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; }
.sgd-feat-img { aspect-ratio: auto; height: auto; object-fit: initial; }

/* 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); }

/* 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; }
.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); }
.sgd-cat-nav .menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 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; }
}