/* =========================================================
   custom.css — estilos propios de TheCrack Racing
   (se carga despues de main.css, no lo modifica)
   ========================================================= */

/* ---- Filtro por marca (circulos arriba del catalogo) ---- */
.brand-filters {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 20px;
  margin-bottom: 6px;
  scrollbar-width: thin;
}
.brand-filter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 78px;
  background: none;
  border: none;
  cursor: pointer;
}
.brand-filter__circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--header);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  transition: all 0.2s ease;
}
.brand-filter__circle i {
  font-size: 20px;
}
.brand-filter__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
  max-width: 78px;
}
.brand-filter:hover .brand-filter__circle {
  border-color: var(--theme);
  transform: translateY(-2px);
}
.brand-filter.is-active .brand-filter__circle {
  background: var(--theme);
  border-color: var(--theme);
  color: var(--ink);
}
.brand-filter.is-active .brand-filter__label {
  color: var(--theme);
}

/* ---- Selector de idioma ES / EN ---- */
.lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  overflow: hidden;
  margin-right: 4px;
}
.lang-switch button {
  border: none;
  background: transparent;
  color: var(--header);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-switch button:first-child {
  border-right: 1px solid var(--border);
}
.lang-switch button.is-active {
  background: var(--theme);
  color: var(--ink);
}
.lang-switch button:not(.is-active) {
  opacity: 0.6;
}
.lang-switch button:not(.is-active):hover {
  opacity: 1;
  color: var(--theme);
}

/* ---- Logo de marca (imagen real) ---- */
.header-main .logo img {
  height: 46px;
  width: auto;
}
.footer-widget-items .widget-logo img {
  height: 54px;
  width: auto;
}
/* .offcanvas__logo img ya tiene width:150px definido en main.css (mayor especificidad) */

/* ---- Boton secundario (para diferenciarlo del theme-btn amarillo) ---- */
.theme-btn.theme-two {
  background-color: var(--ink);
  color: var(--white);
}
.theme-btn.theme-two:hover {
  color: var(--white);
}
.theme-btn.theme-two::before {
  background-color: var(--theme2);
}

/* ---- Franja "sigueme en redes" ---- */
.follow-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}
.follow-bar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.follow-bar a:hover {
  background: var(--theme);
  border-color: var(--theme);
}
.follow-bar a i {
  font-size: 16px;
}

/* ---- Grid de catalogo (modelos 3D y productos fisicos) ---- */
/* Columnas fijas (no "auto-fill") para que la ultima fila nunca quede
   incompleta o descuadrada: 1 columna en celular, 2 en tablet, 4 en
   escritorio. Por eso las secciones destacadas usan cantidades multiplo
   de 4 (8 modelos, 4 productos). */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 10px;
}
@media (max-width: 575px) {
  .catalog-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 992px) {
  .catalog-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.catalog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.catalog-card:hover {
  transform: translateY(-6px);
}
.catalog-card__img {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
.catalog-card__img a.model-photo-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}
.catalog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.photo-count-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.65);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}
.catalog-card:hover .catalog-card__img img {
  transform: scale(1.06);
}
.catalog-card__img[data-preview-index] {
  cursor: pointer;
}

/* ---- Etiquetas llamativas sobre la foto (archivo STL / gratis) ---- */
.item-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.item-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.item-badge--stl {
  background: linear-gradient(135deg, #22436b, var(--ink));
}
.item-badge--free {
  background: linear-gradient(135deg, #34d17a, #1a8b3f);
  animation: badge-pop 1.8s ease-in-out infinite;
}
@keyframes badge-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ---- Fotos de productos fisicos: marca de agua + anti-descarga ----
   Se usan como background-image (no <img>) para que no se puedan
   arrastrar/guardar como una imagen normal; solo queda la opcion de
   captura de pantalla. Se reutiliza en las tarjetas y en el modal de
   vista previa (.protected-photo). */
.no-download {
  position: relative;
  background-size: cover;
  background-position: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}
.no-download img.watermark-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  max-width: 150px;
  height: auto;
  opacity: 0.4;
  transform: translate(-50%, -50%);
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  z-index: 2;
}
.catalog-card:hover .catalog-card__img.no-download img.watermark-logo {
  transform: translate(-50%, -50%);
}

/* ---- Modal de vista previa de producto fisico (galeria + detalles) ---- */
.product-preview {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.product-preview__gallery {
  flex: 1 1 300px;
  min-width: 240px;
}
.product-preview__main {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.product-preview__main .protected-photo,
.product-preview__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product-preview__thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.preview-thumb {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.65;
  transition: all 0.2s ease;
}
.model-preview-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.model-preview-note i {
  color: var(--theme);
}
.preview-thumb:hover {
  opacity: 1;
}
.preview-thumb.is-active {
  opacity: 1;
  border-color: var(--theme);
}
.product-preview__details {
  flex: 1 1 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.product-preview__details .price-badge {
  font-size: 26px;
}
.product-preview__details p {
  color: var(--text);
  margin: 0;
  line-height: 1.6;
}
.product-preview__details .btn-whatsapp {
  align-self: flex-start;
  margin-top: auto;
}
.catalog-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalog-card__title {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--header);
  margin-bottom: 8px;
  line-height: 1.35;
}
.catalog-card__desc {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
  flex: 1;
}
.catalog-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tag-chip {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.catalog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.price-badge {
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--header);
}
.price-badge small {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}

/* ---- Botones de accion especificos ---- */
.btn-cults {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--ink);
  color: var(--white) !important;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  transition: background 0.3s ease;
}
.btn-cults:hover {
  background: var(--theme2);
  color: var(--white) !important;
}
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  background: #25D366;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  transition: filter 0.3s ease;
}
.btn-whatsapp:hover {
  filter: brightness(0.92);
  color: var(--white) !important;
}

/* ---- Burbuja flotante de WhatsApp (productos fisicos) ---- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  animation: whatsapp-pulse 2.4s ease-in-out infinite;
  transition: transform 0.25s ease;
}
.whatsapp-float:hover {
  transform: scale(1.08);
  color: var(--white) !important;
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  50% { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 12px rgba(37, 211, 102, 0); }
}
@media (max-width: 575px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
}

/* ---- Modal de aviso antes de ir a Cults3D ---- */
.modal-content {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 24px;
}
.modal-header .modal-title {
  color: var(--header);
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-header .modal-title i {
  color: var(--theme);
}
.modal-body {
  padding: 24px;
  color: var(--text);
}
.modal-body p {
  margin-bottom: 14px;
}
.modal-body p:last-child {
  margin-bottom: 0;
}
.modal-body strong {
  color: var(--header);
}

/* Variante "de cuidado" para el aviso legal antes de ir a Cults3D:
   encabezado ambar bien visible + icono grande, para que no pase
   desapercibido. */
.modal-warning .modal-header {
  background: linear-gradient(135deg, #3d2c05, #2a2110);
  border-bottom: 1px solid #4a3a16;
  border-radius: 16px 16px 0 0;
}
.modal-warning .modal-header .modal-title {
  color: #FFE9B8;
}
.modal-warning .modal-header .modal-title i {
  font-size: 26px;
  color: #F0C87A;
}
.modal-warning .modal-body strong {
  color: var(--theme);
}
.disclaimer-verify {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
}
.disclaimer-verify i {
  flex: 0 0 auto;
  color: #25D366;
  margin-top: 2px;
}
.disclaimer-verify span {
  flex: 1 1 auto;
}
.disclaimer-verify strong {
  color: var(--theme);
}
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 18px 24px;
  gap: 10px;
}
.modal-footer .theme-btn,
.modal-footer .theme-btn.theme-two {
  height: 48px;
  line-height: 48px;
  padding: 0 26px;
}
.modal-backdrop.show {
  opacity: 0.75;
}

/* ---- Aviso "solo Peru" ---- */
.peru-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #2A2110;
  border: 1px solid #4A3A16;
  color: #F0C87A;
  padding: 16px 22px;
  border-radius: 14px;
  font-weight: 600;
  margin-bottom: 34px;
}
.peru-notice i {
  font-size: 20px;
}

/* ---- Seccion "ver todo" dentro del home ---- */
.section-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---- Estados de carga / error / vacio del catalogo ---- */
.catalog-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: var(--text);
}
.catalog-state i {
  font-size: 30px;
  color: var(--theme2);
  margin-bottom: 10px;
  display: block;
}

/* ---- Boton cargar mas ---- */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}
#load-more-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Skeleton simple mientras carga ---- */
.skeleton-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--box-shadow);
}
.skeleton-card__img {
  aspect-ratio: 1/1;
  background: linear-gradient(90deg, var(--bg) 25%, #2A3441 37%, var(--bg) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
.skeleton-card__line {
  height: 12px;
  margin: 18px 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Mensaje de estado del form de contacto ---- */
.form-message {
  margin-top: 16px;
  font-weight: 600;
  display: none;
}
.form-message.success {
  display: block;
  color: #1a8b3f;
}
.form-message.error {
  display: block;
  color: #d1373f;
}

/* =========================================================
   TEMA OSCURO
   ========================================================= */
:root {
  /* --header y --text las usa main.css en cientos de selectores (titulos y
     texto de parrafo) via var(), asi que redefinirlas aqui repinta casi todo
     el sitio automaticamente. --ink guarda el navy original para los pocos
     botones/acentos que necesitan quedarse oscuros pase lo que pase. */
  --ink: #0B2239;
  --header: #F2F5FA;
  --text: #A9B4C2;
  --bg: #131A24;
  --bg2: #1A222E;
  --border: #26303D;
  --box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.45);
  --surface: #171F2B;
  /* Amarillo mas vivo: el original (#FBE87E) quedaba muy palido/poco */
  /* visible sobre fondos oscuros. */
  --theme: #FFC629;
}

body {
  background-color: #0B0E14;
}

/* La barra del menu (header) es blanca por defecto en main.css, tanto en
   su estado normal como al hacer scroll (.sticky) */
.header-1.header-one .mega-menu-wrapper,
.sticky.header-one .mega-menu-wrapper {
  background-color: var(--surface) !important;
}
/* .sticky (generico, para cualquier header) trae background-color:#fff
   fijo en main.css — eso dejaba los costados del header blancos al hacer
   scroll, aunque la "pildora" interior ya estuviera oscura. */
.sticky {
  background-color: var(--surface) !important;
}
.header-main .main-menu ul li a {
  color: var(--header) !important;
}
.header-main .main-header__search,
.header-main .main-header__search i {
  color: var(--header) !important;
}

/* main.css empareja MUCHOS elementos con fondo amarillo (var(--theme)) y
   texto var(--header), asumiendo que --header era oscuro. Ahora que
   --header es claro (para que los titulos se lean en fondo oscuro), esos
   textos sobre amarillo quedarian casi invisibles. Se fijan a --ink
   (el navy original) solo en los que aparecen en las paginas activas. */
.theme-btn {
  color: var(--ink);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
  color: var(--ink) !important;
}
.offcanvas__wrapper .offcanvas__content .social-icon a:hover {
  color: var(--ink) !important;
}
.footer-contact-area .maie-box .footer-input .newsletter-btn {
  color: var(--ink) !important;
}

/* Superficies propias que antes eran blancas (tarjetas, formulario de
   contacto, panel lateral) */
.contact-wrapper-3 .contact-area-top .contact-items,
.contact-wrapper-3 .contact-area-bottom .contact-from {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
.offcanvas__info {
  background-color: var(--surface) !important;
}

/* El menu movil (meanmenu) trae su color de texto fijo en main.css, pensado
   para un panel lateral blanco */
.mean-container .mean-nav ul li a {
  color: var(--header) !important;
  border-bottom-color: var(--border) !important;
}

/* Estos botones usaban var(--header) como FONDO (navy) — ahora que --header
   es un color claro para texto, se restauran a --ink para no perder contraste */
.theme-btn::before {
  background-color: var(--ink);
}
/* Ademas del circulo animado de arriba (que puede no cubrir el boton
   entero en algunos tamanos), se fija el fondo oscuro directo en :hover
   para garantizar que el texto blanco siempre tenga contraste. */
.theme-btn:hover {
  background-color: var(--ink);
  color: var(--white) !important;
}
.back-to-top:hover,
.search-popup__form .search-btn:hover {
  background-color: var(--ink) !important;
}

/* El texto del hero (titulo, botones) dependia de la clase
   ".swiper-slide-active" que ponia Swiper para revelarlo (por defecto
   main.css lo deja en opacity:0). Como el hero ya no usa el carrusel
   (ahora es un video de fondo fijo), se fuerza visible aqui con una
   entrada suave propia. */
.hero-1 .hero-content,
.hero-1 .hero-button {
  opacity: 0;
  animation: heroReveal 1200ms ease forwards;
}
.hero-1 .hero-content {
  animation-delay: 300ms;
}
.hero-1 .hero-button {
  animation-delay: 600ms;
}
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fondo de video en el hero (reemplaza al carrusel de fotos). */
.hero-bg--video {
  background: var(--bg);
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* El video fuente es 1920x1080; en pantallas mas anchas que eso el
     navegador lo estira mas alla de su resolucion nativa y se nota
     borroso. Un desenfoque/grade leve disimula eso y le da un look
     mas cinematico en vez de verse "en baja calidad". */
  filter: blur(2px) saturate(1.15) contrast(1.08) brightness(0.8);
}
.hero-bg--video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.6) 100%),
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(255, 255, 255, 0.12), transparent 65%),
    radial-gradient(ellipse 55% 45% at 80% 75%, rgba(255, 255, 255, 0.09), transparent 65%),
    radial-gradient(ellipse 45% 40% at 55% 15%, rgba(255, 255, 255, 0.07), transparent 60%);
  background-size: 100% 100%, 220% 220%, 220% 220%, 220% 220%;
  animation: heroSmokeDrift 26s ease-in-out infinite alternate;
}
@keyframes heroSmokeDrift {
  0% {
    background-position: 0 0, 0% 10%, 100% 90%, 40% 0%;
  }
  100% {
    background-position: 0 0, 25% 30%, 75% 65%, 65% 25%;
  }
}