/* =============================
   ShopFusion — styles.css
   Futuristic tech-premium theme
   Colors: black #000, orange #FF6A00, white #FFF
   Tipografías: Poppins/Inter (texto) + Orbitron (títulos)
   Estructura compatible con index.html existente
   ============================= */

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@500;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --clr-bg: #000000;
  --clr-surface: #0b0b0b;
  --clr-surface-2: #111111;
  --clr-text: #ffffff;
  --clr-muted: #c9c9c9;
  --clr-accent: #FF6A00;
  --clr-accent-2: #FF9500;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow-soft: 0 0 22px rgba(255,106,0,.18), inset 0 0 0 1px rgba(255,106,0,.15);
  --shadow-strong: 0 0 40px rgba(255,106,0,.45), 0 10px 30px rgba(0,0,0,.45);
  --header-h: 72px;
}

/* Reset básico */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', 'Poppins', system-ui, sans-serif;
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.5;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }

/* ======= Header & nav ======= */
header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.65));
  border-bottom: 1px solid rgba(255,106,0,.18);
  box-shadow: 0 0 0 1px rgba(255,106,0,.08), 0 8px 20px rgba(0,0,0,.45);
}
header::after { /* línea de luz inferior */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,106,0,.75), transparent 70%);
  filter: blur(6px);
}
header.hidden { transform: translateY(-100%); transition: transform .45s ease; }

#logo text { font-family: 'Orbitron', sans-serif; letter-spacing: .5px; }

/* nav */
nav { display:flex; align-items:center; gap: 8px; }
#nav-menu { list-style:none; display:flex; gap: clamp(12px, 2.4vw, 32px); margin:0; padding:0; }
#nav-menu .nav-link { position:relative; text-decoration:none; color: var(--clr-text); font-weight: 500; }
#nav-menu .nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  transition: width .4s ease;
}
#nav-menu .nav-link:hover::after{ width:100%; }

/* hamburger */
.nav-toggle { display:none; background:none; border:0; padding:10px; cursor:pointer; }
.hamburger, .hamburger::before, .hamburger::after {
  content:""; display:block; width:24px; height:2px; background: #fff; border-radius: 10px; transition:.35s;
}
.hamburger::before { transform: translateY(-7px); }
.hamburger::after  { transform: translateY(5px); }
.nav-active .hamburger { background: transparent; }
.nav-active .hamburger::before { transform: translateY(0) rotate(45deg); background: var(--clr-accent); }
.nav-active .hamburger::after  { transform: translateY(-2px) rotate(-45deg); background: var(--clr-accent); }

@media (max-width: 980px){
  .nav-toggle { display:block; }
  #nav-menu {
    position: fixed; inset: var(--header-h) 0 auto 0; bottom:auto;
    background: rgba(0,0,0,.96); backdrop-filter: blur(10px);
    transform-origin: top; transform: scaleY(0); transition: transform .35s ease;
    display:flex; flex-direction:column; gap: 14px; padding: 18px 20px; border-bottom: 1px solid rgba(255,106,0,.18);
  }
  #nav-menu.active { transform: scaleY(1); }
}

/* ======= Hero ======= */
.hero {
  position: relative;
  min-height: clamp(110vh, 10vh, 10vh); /* antes 70–94vh */
  isolation: isolate;
}

.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: brightness(.45) saturate(1.1) contrast(1.05);
}
.hero .overlay { position:absolute; inset:0; background:
  radial-gradient(60% 60% at 50% 40%, rgba(255,106,0,.1), transparent 70%),
  radial-gradient(40% 40% at 80% 80%, rgba(255,149,0,.08), transparent 80%);
  animation: energyWave 15s linear infinite;
}
@keyframes energyWave {
  0%{ background-position:0% 0%, 100% 100%; }
  50%{ background-position:100% 30%, 0% 60%; }
  100%{ background-position:0% 0%, 100% 100%; }
}
.hero-content{ position:relative; z-index:2; height:100%; display:grid; place-items:center; padding: 0 20px; }

/* Hero text block (inyectable) */
.hero-text { text-align:center; max-width: 940px; }
.hero-text h1 { font-family: 'Orbitron', sans-serif; font-size: clamp(36px, 7vw, 68px); letter-spacing:.5px; margin:0 0 10px;
  text-shadow: 0 0 16px rgba(255,106,0,.6), 0 0 46px rgba(255,106,0,.35);
}
.hero-text p { color: var(--clr-muted); font-size: clamp(16px, 2.2vw, 20px); margin: 0 0 26px; }
.btn-hero {
  display:inline-flex; align-items:center; gap:10px; border:0; padding:14px 24px; cursor:pointer;
  background: var(--clr-accent); color:#000; border-radius: 50px; font-weight:700; letter-spacing:.3px;
  box-shadow: 0 0 15px var(--clr-accent);
  animation: pulseGlow 2s infinite ease-in-out;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow: 0 0 10px var(--clr-accent); transform: scale(1); }
  50%{ box-shadow: 0 0 30px var(--clr-accent); transform: scale(1.05); }
}

/* Partículas decorativas (light orbs) */
.hero::before, .hero::after {
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  filter: blur(40px); opacity:.25; pointer-events:none;
}
.hero::before { background: #FF6A00; top:8%; left:8%; animation: floatParticle 9s ease-in-out infinite; }
.hero::after  { background: #FF9500; bottom:8%; right:12%; animation: floatParticle 12s ease-in-out infinite; }
@keyframes floatParticle { 0%{ transform:translateY(0) } 50%{ transform: translateY(-18px) scale(1.04)} 100%{ transform:translateY(0) } }

/* Marcas scroller */
.brands { width:100%; display:flex; gap:26px; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brands .item { flex:0 0 auto; padding:10px 18px; border-radius: 999px; font-weight:600; color:#000;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2)); box-shadow: var(--shadow-soft);
  animation: scrollLeft 16s linear infinite;
}
@keyframes scrollLeft{
  from{ transform: translateX(0); } to{ transform: translateX(-50%); }
}

/* ======= Search Section ======= */
#search-section { padding: clamp(48px, 8vw, 90px) 20px; max-width: 1200px; margin:0 auto; }
#search-section h2 { font-family:'Orbitron', sans-serif; letter-spacing:.4px; text-shadow: 0 0 24px rgba(255,106,0,.4); }
.search-info { color: var(--clr-muted); max-width: 860px; margin: 0 0 14px; }
.search-container { position:relative; }
#search-form { display:flex; gap:8px; }
#search-input {
  flex:1; padding:16px 18px; border-radius: 16px; border:1px solid rgba(255,106,0,.35);
  background: linear-gradient(180deg, #0B0B0B, #0E0E0E); color:#fff; outline: none;
  box-shadow: inset 0 0 12px rgba(255,106,0,.08);
  transition: box-shadow .25s, border-color .25s;
}
#search-input:focus{ border-color: var(--clr-accent); box-shadow: 0 0 22px rgba(255,106,0,.35), inset 0 0 12px rgba(255,106,0,.1); }
.search-btn { width:54px; border:0; border-radius: 14px; background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2)); color:#000; font-size:18px; cursor:pointer; box-shadow: var(--shadow-soft); }

/* Resultados */
.search-results { position:absolute; inset: calc(100% + 12px) 0 auto 0; background: #0b0b0b; border:1px solid rgba(255,106,0,.2); border-radius:18px; overflow:hidden; transform: translateY(12px) scale(.98); opacity:0; pointer-events:none; transition:.3s ease; }
.search-results.active{ transform: translateY(0) scale(1); opacity:1; pointer-events:auto; }
.search-loading { display:none; gap:10px; align-items:center; padding: 16px; }
.search-loading .loader{ width:22px; height:22px; border:3px solid rgba(255,106,0,.25); border-top-color: var(--clr-accent); border-radius:50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); }}
.close-btn { position:absolute; top:8px; right:8px; background:none; border:0; color:#fff; font-size:20px; cursor:pointer; }
.search-results-container { display:grid; gap:12px; padding: 18px; max-height: 60vh; overflow:auto; }
.search-result-item { display:grid; grid-template-columns: 86px 1fr; gap:12px; padding:12px; border-radius:12px; background: linear-gradient(145deg, #0a0a0a, #111); border:1px solid rgba(255,106,0,.2); }
.search-result-img { width:86px; height:86px; object-fit:cover; border-radius:10px; }
.search-error, .search-message{ padding:16px; color:var(--clr-muted); }

/* ======= Recommendations (product cards) ======= */
section[id$="recommendations"] { padding: clamp(40px, 6.5vw, 80px) 0; position:relative; }
section[id$="recommendations"] > h2 { padding: 0 20px; font-family:'Orbitron',sans-serif; }
.products-container { display:flex; gap:16px; overflow:auto; scroll-snap-type: x mandatory; padding: 18px 20px; }
.products-container::-webkit-scrollbar { height:8px; }
.products-container::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--clr-accent), var(--clr-accent-2)); border-radius: 999px; }

.carousel-nav { position:absolute; top: 58%; transform: translateY(-50%); z-index:2; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,106,0,.45); color:#fff; background: rgba(0,0,0,.4); cursor:pointer; display:grid; place-items:center; box-shadow: var(--shadow-soft); transition:.25s; }
.carousel-nav:hover{ background: rgba(255,106,0,.12); }
.carousel-nav.prev{ left: 8px; }
.carousel-nav.next{ right: 8px; }
.carousel-nav.hidden{ opacity:.2; pointer-events:none; }

.product-card { position:relative; flex: 0 0 min(86%, 320px); scroll-snap-align: start; border-radius: 12px; overflow:hidden; background: linear-gradient(145deg, #0a0a0a, #111); border:1px solid rgba(255,106,0,.5); box-shadow: 0 0 12px rgba(255,106,0,.4); transition: transform .4s ease, box-shadow .4s ease, border-color .25s ease; }
.product-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(255,106,0,0.35), transparent); transform: translateX(-100%); transition: transform .7s ease; pointer-events:none; }
.product-card:hover{ transform: translateY(-15px) scale(1.05); box-shadow: 0 0 28px rgba(255,106,0,.85); }
.product-card:hover::before{ transform: translateX(100%); }
.product-card.active { outline: 2px solid var(--clr-accent); box-shadow: var(--shadow-strong); }

.product-content{ padding: 14px; display:grid; gap:12px; }
.carousel { position:relative; height: 200px; overflow:hidden; border-radius: 10px; }
.carousel img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .5s ease; }
.carousel img.active{ opacity:1; }
.product-name { font-weight:700; font-size: 18px; }
.product-desc { color: var(--clr-muted); font-size: 14px; max-height: 70px; overflow:hidden; }
.categoria, .price { color:#eee; font-size: 13px; }
.button-container { display:flex; gap:8px; }
.btn { border:0; border-radius: 10px; padding:10px 14px; background: #181818; color:#fff; border:1px solid rgba(255,106,0,.35); cursor:pointer; transition:.25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,106,0,.25); border-color: var(--clr-accent); }

/* Toggle imagen/texto dentro de tarjeta */
.product-card.show-image .product-desc { display:none; }

/* ======= About ======= */
.about-section { position:relative; padding: clamp(50px, 8vw, 110px) 20px; background: linear-gradient(180deg, #060606, #0a0a0a); overflow:hidden; }
.about-section::before{
  content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,106,0,.05) 0 1px, transparent 1px 140px);
  mask-image: radial-gradient(500px 200px at 10% 20%, #000 60%, transparent), radial-gradient(500px 200px at 80% 70%, #000 60%, transparent);
  opacity:.35; animation: circuit 20s linear infinite; pointer-events:none;
}
@keyframes circuit { to { background-position: 140px 0; } }
.about-section h2 { font-family:'Orbitron',sans-serif; text-align:center; margin:0 0 18px; }
.about-section .container { max-width: 980px; margin: 0 auto; }
.about-section p { margin: 0 0 12px; color:var(--clr-muted); }

/* ======= Contact ======= */
#contact { padding: clamp(50px, 8vw, 110px) 20px; max-width: 1200px; margin:0 auto; }
.section-header{ text-align:center; font-family:'Orbitron',sans-serif; }
.contact-wrapper { display:grid; grid-template-columns: 1.2fr .8fr; gap: 26px; align-items:start; }
@media (max-width: 980px){ .contact-wrapper{ grid-template-columns: 1fr; } }
.form-control, .form-textarea, .form-input {
  width:100%; background: #0d0d0d; color:#fff; border:1px solid rgba(255,106,0,.25); border-radius: 12px; padding:12px 14px; outline:0; transition:.25s;
}
.form-control:focus, .form-textarea:focus, .form-input:focus { border-color: var(--clr-accent); box-shadow: 0 0 18px rgba(255,106,0,.28); }
.send-button { margin-top: 10px; border-radius: 16px; border:1px solid rgba(255,106,0,.35); background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2)); color:#000; font-weight:800; letter-spacing:.3px; }
.send-button:active { transform: scale(.97); box-shadow: 0 0 20px var(--clr-accent); }
.contact-icon{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,106,0,.4); color:#fff; transition:.45s; }
.contact-icon:hover{ color: var(--clr-accent); transform: rotate(360deg) scale(1.2); }

/* ======= Footer ======= */
footer { position:relative; padding: 28px 20px; border-top:1px solid rgba(255,106,0,.18); background: #050505; overflow:hidden; }
footer::before{
  content:""; position:absolute; left:-50%; right:-50%; top:-60%; height: 300%;
  background: repeating-linear-gradient(0deg, rgba(255,106,0,.06) 0 2px, transparent 2px 8px);
  animation: energyFlow 18s linear infinite; opacity:.35;
}
@keyframes energyFlow { to { transform: translateY(-20%); } }
footer nav ul { list-style:none; display:flex; gap:16px; justify-content:center; padding:0; margin:0; }
footer nav a { color:#fff; text-decoration:none; position:relative; }
footer nav a:hover{ text-shadow: 0 0 14px rgba(255,106,0,.8); }

/* ======= Utilidades y responsividad ======= */
.container { width:min(1200px, 100%); margin-inline:auto; }
.hidden-admin { display:none !important; }

/* breakpoints */
@media (max-width: 1280px){ .product-card{ flex-basis: min(90%, 320px); } }
@media (max-width: 780px){ 
  .hero { min-height: 78vh; }
  .brands .item{ animation-duration: 22s; }
}

/* ===== Google Translate — estilo compacto y alineado ===== */

/* Contenedor en nav (si usas Opción A) */
nav{ display:flex; align-items:center; gap: 12px; }
.nav-i18n{ margin-left: auto; display:flex; align-items:center; }

/* Oculta texto "Seleccionar idioma" y el ícono que inyecta Google */
#google_translate_element .goog-te-gadget > span { display:none !important; }
#google_translate_element .goog-te-gadget img { display:none !important; }

/* Combobox */
#google_translate_element .goog-te-combo{
  appearance: none;
  background: #0e0e0e !important;
  color:#fff !important;
  border:1px solid rgba(255,106,0,.35) !important;
  border-radius: 12px !important;
  padding: 10px 36px 10px 12px !important;
  font: 500 14px/1 'Inter', system-ui, sans-serif !important;
  outline: 0 !important;
  transition: box-shadow .25s, border-color .25s;
  box-shadow: inset 0 0 12px rgba(255,106,0,.08);
}

/* Estado focus/hover */
#google_translate_element .goog-te-combo:hover,
#google_translate_element .goog-te-combo:focus{
  border-color: #FF6A00 !important;
  box-shadow: 0 0 18px rgba(255,106,0,.28), inset 0 0 12px rgba(255,106,0,.1) !important;
}

/* Flecha del select (pseudo) */
#google_translate_element{
  position: relative;
}
#google_translate_element::after{
  content:"▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events:none;
  font-size: 12px;
  color:#fff;
  opacity:.75;
}

/* Evita la barra superior de Google y el “empujón” del body */
.goog-te-banner-frame.skiptranslate{ display:none !important; }
body{ top:0 !important; }

/* Mobile: que no estorbe ni se rompa el header */
@media (max-width: 980px){
  .nav-i18n{ margin-left: 0; }
  #google_translate_element .goog-te-combo{
    padding: 10px 32px 10px 10px !important;
    font-size: 13px !important;
  }
}

/* ========= ShopFusion — Text FX (non-destructive) ========= */
:root{
  --fx-accent: var(--clr-accent, #FF6A00);
  --fx-accent-2: var(--clr-accent-2, #FF9500);
}
.fx-gradient-text{
  background: linear-gradient(90deg, var(--fx-accent), var(--fx-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 20px rgba(255,106,0,.25);
}
.fx-glow{
  text-shadow: 0 0 10px rgba(255,106,0,.45), 0 0 30px rgba(255,149,0,.25);
}
.fx-outline{
  -webkit-text-stroke: 1px rgba(255,255,255,.25);
  color: transparent;
}
.fx-wipe{ overflow: hidden; position: relative; display:inline-block; }
.fx-wipe::after{
  content:""; position:absolute; inset:0; transform:translateX(-102%);
  background: linear-gradient(90deg, rgba(255,255,255,.0) 0, rgba(255,255,255,.08) 45%, rgba(255,255,255,.0) 100%);
}
.fx-bounce{ display:inline-block; }
.fx-stagger > *{ display:inline-block; }

/* Máquina de escribir suave (para párrafos o slogans) */
.fx-type{
  --w: 2px;
  position: relative; white-space: nowrap;
  border-right: var(--w) solid rgba(255,255,255,.55);
  animation: caret 900ms steps(1) infinite;
}
@keyframes caret{ 50%{ border-color: transparent; } }

/* Enfatizador de botones / links al pasar */
.fx-shimmer{
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,106,0,.2), 0 8px 24px rgba(255,106,0,.18);
}
.fx-shimmer::before{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background: linear-gradient(120deg, transparent 0, rgba(255,255,255,.18) 50%, transparent 100%);
  transition: transform .7s ease;
}
.fx-shimmer:hover::before{ transform: translateX(120%); }

/* Respeto accesibilidad */
@media (prefers-reduced-motion: reduce){
  .fx-wipe::after, .fx-shimmer::before{ display:none !important; }
  .fx-type{ animation:none; border-right:0; }
}
/* Elevar el buscador sobre el sorteo/PayPal */
#search-section { position: relative; z-index: 4000; }
#search-section .search-container { position: relative; z-index: 4001; }
#search-section .search-results { position: absolute; z-index: 4002; }






/* =========================================================
   ShopFusion — Light Theme (CLARO)  v1.0
   Activo cuando <html data-theme="light">
   Paleta: fondo #fafafa / superficie #fff / texto #0b0b0b
   Acentos: naranja #FF6A00 y #FF9500
   ========================================================= */

/* ---------- Variables de color, sombras y radios ---------- */
:root[data-theme="light"]{
  --clr-bg: #fafafa;
  --clr-surface: #ffffff;
  --clr-surface-2: #f6f6f6;
  --clr-text: #0b0b0b;
  --clr-muted: #444;            /* texto secundario */
  --clr-accent: #FF6A00;
  --clr-accent-2: #FF9500;

  --clr-border: rgba(0,0,0,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.12);

  --radius: 14px;
  --radius-lg: 24px;

  --header-h: 72px;
}

/* ---------- Base ---------- */
:root[data-theme="light"] body{
  background: var(--clr-bg);
  color: var(--clr-text);
}
:root[data-theme="light"] img,
:root[data-theme="light"] video{ display:block; max-width:100%; }

/* ---------- Header & Nav ---------- */
:root[data-theme="light"] header{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.9));
  border-bottom: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] header::after{
  background: radial-gradient(50% 100% at 50% 100%, rgba(255,106,0,.35), transparent 70%);
  filter: blur(5px);
}
:root[data-theme="light"] #nav-menu .nav-link{ color: var(--clr-text); }
:root[data-theme="light"] .hamburger,
:root[data-theme="light"] .hamburger::before,
:root[data-theme="light"] .hamburger::after{ background:#121212; }
@media (max-width:980px){
  :root[data-theme="light"] #nav-menu{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--clr-border);
  }
}

/* ---------- Hero ---------- */
:root[data-theme="light"] .hero video{
  filter: brightness(.88) saturate(1.02) contrast(1.02);
}
:root[data-theme="light"] .hero .overlay{
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,106,0,.10), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgba(255,149,0,.08), transparent 80%);
}
:root[data-theme="light"] .hero-text h1{
  text-shadow: 0 0 12px rgba(255,106,0,.35), 0 0 28px rgba(255,106,0,.2);
}
:root[data-theme="light"] .hero::before{ opacity:.18; }
:root[data-theme="light"] .hero::after{  opacity:.18; }

/* ---------- Marcas scroller ---------- */
:root[data-theme="light"] .brands{
  mask-image: linear-gradient(90deg, transparent, #fff 10%, #fff 90%, transparent);
}

/* ---------- Botones / CTA ---------- */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .cta,
:root[data-theme="light"] .btn-hero{
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  color:#fff;
  border: none;
  box-shadow: var(--shadow-md);
}
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .cta:hover,
:root[data-theme="light"] .btn-hero:hover{ filter: brightness(1.05); }

/* ---------- Sección de Búsqueda ---------- */
:root[data-theme="light"] #search-section{ background: transparent; }
:root[data-theme="light"] #search-section h2{
  text-shadow: 0 0 12px rgba(255,106,0,.25);
}
:root[data-theme="light"] #search-form{ gap:8px; }
:root[data-theme="light"] #search-input{
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  box-shadow: none;
}
:root[data-theme="light"] #search-input::placeholder{ color:#6b6b6b; }
:root[data-theme="light"] .search-btn{
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  color:#fff;
  border:none;
}
:root[data-theme="light"] .search-results{
  background: var(--clr-surface);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
}
:root[data-theme="light"] .search-loading .loader{
  border-color: rgba(0,0,0,.12);
  border-top-color: var(--clr-accent);
}
:root[data-theme="light"] .search-result-item{
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  border: 1px solid var(--clr-border);
}
:root[data-theme="light"] .close-btn{ color:#222; }

/* ---------- Tarjetas / Carrusel de productos ---------- */
:root[data-theme="light"] .product-card{
  background: linear-gradient(145deg, #ffffff, #f7f7f7);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .product-card:hover{
  box-shadow: 0 0 26px rgba(255,106,0,.35);
  transform: translateY(-12px) scale(1.03);
  border-color: rgba(255,106,0,.45);
}
:root[data-theme="light"] .product-card.active{
  outline:2px solid var(--clr-accent);
  box-shadow: var(--shadow-lg);
}
:root[data-theme="light"] .product-name{ color: var(--clr-text); }
:root[data-theme="light"] .product-desc{ color: var(--clr-muted); }
:root[data-theme="light"] .btn{
  background:#fff;
  color:#111;
  border:1px solid var(--clr-border);
}
:root[data-theme="light"] .btn:hover{
  border-color: var(--clr-accent);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* ---------- About ---------- */
:root[data-theme="light"] .about-section{
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
}
:root[data-theme="light"] .about-section::before{
  opacity:.18;
}
:root[data-theme="light"] .about-section p{ color: var(--clr-muted); }

/* ---------- Contacto ---------- */
:root[data-theme="light"] #contact{ background: transparent; }
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .form-textarea,
:root[data-theme="light"] .form-input{
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  box-shadow: none;
}
:root[data-theme="light"] .form-control:focus,
:root[data-theme="light"] .form-textarea:focus,
:root[data-theme="light"] .form-input:focus{
  border-color: var(--clr-accent);
  box-shadow: 0 0 14px rgba(255,106,0,.25);
}
:root[data-theme="light"] .send-button{
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  color:#fff;
  border: none;
  box-shadow: var(--shadow-md);
}

/* ---------- Footer ---------- */
:root[data-theme="light"] footer{
  background: #f4f4f4;
  border-top:1px solid var(--clr-border);
}
:root[data-theme="light"] footer::before{
  opacity:.18;
}
:root[data-theme="light"] footer nav a{ color:#111; }
:root[data-theme="light"] footer nav a:hover{
  text-shadow: 0 0 12px rgba(255,106,0,.55);
}

/* ---------- Badges, cajas y elementos comunes ---------- */
:root[data-theme="light"] .card,
:root[data-theme="light"] .section,
:root[data-theme="light"] .box,
:root[data-theme="light"] .navbar,
:root[data-theme="light"] .input-group,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .dropdown,
:root[data-theme="light"] #search-section,
:root[data-theme="light"] .sorteo-card{
  background: var(--clr-surface);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .badge{
  background: rgba(255,106,0,.10);
  color: var(--clr-accent);
  border: 1px solid rgba(255,106,0,.25);
}

/* ---------- Enlaces ---------- */
:root[data-theme="light"] a{ color: var(--clr-accent); }
:root[data-theme="light"] a:hover{ color: var(--clr-accent-2); }

/* ---------- Separadores ---------- */
:root[data-theme="light"] hr, 
:root[data-theme="light"] .hr{ border-color: var(--clr-border); }

/* ---------- Google Translate (compacto) ---------- */
:root[data-theme="light"] #google_translate_element .goog-te-combo{
  background: #fff !important;
  color:#111 !important;
  border:1px solid var(--clr-border) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #google_translate_element::after{ color:#121212; }

/* ---------- FX de texto (compatibles con claro) ---------- */
:root[data-theme="light"] .fx-gradient-text{
  text-shadow: 0 0 16px rgba(255,106,0,.18);
}
:root[data-theme="light"] .fx-glow{
  text-shadow: 0 0 8px rgba(255,106,0,.28), 0 0 18px rgba(255,149,0,.18);
}
:root[data-theme="light"] .fx-outline{
  -webkit-text-stroke: 1px rgba(0,0,0,.25);
  color: transparent;
}

/* ---------- Toggle de tema ---------- */
:root[data-theme="light"] .theme-toggle{
  background: var(--clr-surface-2);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
}

/* ---------- Z-index buscador sobre sorteo/PayPal ---------- */
:root[data-theme="light"] #search-section{ position:relative; z-index:4000; }
:root[data-theme="light"] #search-section .search-container{ position:relative; z-index:4001; }
:root[data-theme="light"] #search-section .search-results{ position:absolute; z-index:4002; }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background: var(--clr-surface-2); color: var(--clr-text);
  border:1px solid var(--clr-border); box-shadow: var(--shadow-sm);
  cursor:pointer; transition: transform .15s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); }