/* ==========================================================
   TEMA LLAMATIVO — oscuro premium con verde neón (página de Yoel)
   Se carga DESPUÉS de styles.css y solo cambia la apariencia.
   Para volver al estilo anterior: abrir la página con ?tema=clasico
   (y con ?tema=llamativo se vuelve a este). Para quitarlo del todo,
   borrar la línea <link ... id="tema-llamativo"> de cada página.
   ========================================================== */
:root {
  --bg: #0A0C0B;
  --bg-2: #101412;
  --card: #141917;
  --card-2: #1A201D;
  --linea: rgba(255, 255, 255, .07);
  --tinta: #F2F6F3;
  --tinta-2: #B5C0B8;
  --tinta-3: #7E8A82;
  --neon: #3CE01A;
  --neon-glow: 0 0 0 1px rgba(60, 224, 26, .35), 0 10px 40px rgba(60, 224, 26, .22);

  /* variables del diseño base adaptadas al fondo oscuro */
  --texto: var(--tinta);
  --gris: var(--tinta-2);
  --gris-2: var(--tinta-3);
  --borde: var(--linea);
  --fondo: var(--card-2);
  --fondo-pagina: var(--bg);
  --blanco: var(--bg);
  --verde-claro: rgba(60, 224, 26, .12);
  --verde-osc: #5BEA3D;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --sombra-hover: 0 18px 50px rgba(0, 0, 0, .55);
  --sombra-suave: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px rgba(0, 0, 0, .35);
  --sombra-alta: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .6);
}

html { color-scheme: dark; scrollbar-color: #2b332e var(--bg); }
body {
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(60, 224, 26, .10), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(60, 224, 26, .06), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--tinta);
}
h1, h2, h3, h4, h5, .logo, .precio, .category-filter .box-1 p b, .testimonio blockquote, .cot-op-texto b,
.legal-intro, .error-numero, .btn-mini, .legal-indice a:hover { color: var(--tinta) !important; }
.legal-texto p, .legal-texto li { color: var(--tinta-2); }
.legal-texto strong, .legal-texto b { color: var(--tinta); }
a:hover { color: var(--neon); }

/* ---------- Títulos con brillo ---------- */
.sec-head h2::before, .heading-section h2::before { box-shadow: 0 0 14px rgba(60, 224, 26, .8); }
.home-hero h1 em, .flat-title h1 em { text-shadow: none; filter: drop-shadow(0 0 22px rgba(60, 224, 26, .45)); }

/* ---------- Header y menús ---------- */
.main-header { background: rgba(10, 12, 11, .72); border-bottom: 1px solid var(--linea); }
.main-header.scrolled { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.navigation > li > a { color: var(--tinta-2); }
.navigation > li > a:hover, .navigation > li.current > a { color: var(--tinta); }
.navigation > li > a::after { box-shadow: 0 0 10px var(--neon); background: var(--neon); }
.dropdown2 > ul, .menu-box, .offcanvas .panel, .modal-caja { background: var(--card); border: 1px solid var(--linea); }
.dropdown2 > ul a:hover { background: rgba(60, 224, 26, .1); }
.mobile-nav-toggler, .close-btn { background: var(--card-2); color: var(--tinta); border-color: var(--linea); }
.menu-box nav a { border-bottom-color: var(--linea); color: var(--tinta); }
.offcanvas-header, .offcanvas-footer { border-color: var(--linea); }

/* ---------- Botones ---------- */
.btn-verde, .chat:not(.chat-wa) { color: #04130A; font-weight: 700; box-shadow: 0 8px 26px rgba(60, 224, 26, .35); }
.btn-verde:hover, .chat:not(.chat-wa):hover { color: #04130A; box-shadow: 0 10px 34px rgba(60, 224, 26, .55); }
.btn-borde, .btn-mini { background: transparent; border-color: rgba(60, 224, 26, .55); color: var(--tinta) !important; }
.btn-borde:hover, .btn-mini:hover { color: #04130A !important; box-shadow: 0 8px 26px rgba(60, 224, 26, .35); }
.btn-borde i, .btn-mini i { color: var(--neon); }
.btn-borde:hover i, .btn-mini:hover i { color: #04130A; }
/* botones secundarios que traen color en línea desde el código */
.acciones .btn-borde[style], .error-botones .btn-borde[style] { color: var(--tinta) !important; border-color: var(--linea) !important; }
.chat-wa { color: var(--neon); border-color: rgba(60, 224, 26, .5); }
.chat-wa:hover { background: rgba(60, 224, 26, .1); }
.header-account .btn-borde svg { color: var(--neon); }
.btn-link { color: var(--tinta-3); }

/* ---------- Portada ---------- */
.home-hero::after { background: linear-gradient(90deg, rgba(10, 12, 11, .95) 0%, rgba(10, 12, 11, .7) 50%, rgba(10, 12, 11, .25) 100%); }
.home-hero { border-bottom: 1px solid var(--linea); }
.home-search {
  background: rgba(20, 25, 23, .78); border: 1px solid rgba(60, 224, 26, .25); color: var(--tinta);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(60, 224, 26, .08), 0 0 60px rgba(60, 224, 26, .08);
}
.home-search label { color: var(--tinta-2); }
.hero-dots button { background: rgba(255, 255, 255, .25); }
.hero-dots button.on { box-shadow: 0 0 12px var(--neon); }
.flat-title { border-bottom: 1px solid var(--linea); }

/* ---------- Campos ---------- */
.nice-select, .input, .hero-search input, .hero-search select {
  background-color: var(--bg-2); border-color: var(--linea); color: var(--tinta);
}
.nice-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233CE01A' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nice-select option { background: var(--card); color: var(--tinta); }
.nice-select:hover, .input:hover { border-color: rgba(255, 255, 255, .16); }
.nice-select:focus, .input:focus { background-color: var(--bg-2); border-color: var(--neon); box-shadow: 0 0 0 3px rgba(60, 224, 26, .18); }
.nice-select:disabled { background-color: rgba(255, 255, 255, .03); color: var(--tinta-3); }
.input::placeholder { color: var(--tinta-3); }
.chip, .view-btn, .filter-mobie button, .page-numbers, .tabs-vehiculo { background: var(--card-2); border-color: var(--linea); color: var(--tinta-2); }
.chip.active, .view-btn.active, .page-numbers.current, .tabs-vehiculo button.active { color: #04130A; background: var(--grad-verde); border-color: transparent; }
.filter-mobie button { color: var(--tinta); }

/* ---------- Tarjetas ---------- */
.tipo-card, .ingreso, .box-car-list, .servicio, .marca-card, .testimonio, .razon, .spec, .info-card,
.form-card, .caja-precio, .sidebar-right-listing, .legal-indice, .cot-opcion, .empty-state, .tag-filter, .legal-contacto a {
  background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 100%) !important;
  border: 1px solid var(--linea) !important;
  box-shadow: var(--sombra-suave);
}
.tipo-card:hover, .ingreso:hover, .box-car-list:hover, .servicio:hover, .marca-card:hover, .razon:hover,
.info-card:hover, .cot-opcion:hover, .testimonio:hover {
  border-color: rgba(60, 224, 26, .45) !important; box-shadow: var(--neon-glow);
}

/* Tipos: el auto aparece sobre un "escenario" con luz verde */
.tipo-card::before { background: linear-gradient(160deg, #1d2a22 0%, #0f1511 100%); }
.tipo-card:hover { color: var(--tinta); }
.tipo-img::after { background: radial-gradient(closest-side, rgba(60, 224, 26, .45), transparent); height: 14px; }
.tipo-count { color: #04130A; }

/* Fotos */
.ingreso-img, .box-car-list .image-group, .galeria-main, .mini { background: #0d110f; }
.icon-box { border-top-color: var(--linea); }
.icon-box .icons { background: rgba(255, 255, 255, .05); color: var(--tinta-2); }
.inner2, .ingreso-datos { border-color: var(--linea) !important; }
.ingreso-datos { color: var(--tinta-2); }
.precio { color: var(--neon) !important; text-shadow: 0 0 18px rgba(60, 224, 26, .35); }
.precio small { color: var(--tinta-3); text-shadow: none; }
.fav-btn { background: rgba(10, 12, 11, .7); color: var(--tinta); }
.fav-btn.on { color: #ff5a5a; }
.pill-destacado { color: #04130A; }

/* Servicios, razones y avatares con brillo */
.servicio > i, .razon > i, .avatar, .spec i, .info-card i, .modal-icono, .cot-op-icono:not(.wa) { color: #04130A !important; box-shadow: 0 0 22px rgba(60, 224, 26, .35); }

/* Marcas: logos sobre una placa clara para que se vean en fondo oscuro */
.marca-card img { background: #fff; border-radius: 14px; padding: 8px; height: 66px; filter: grayscale(1); opacity: .85; }
.marca-card:hover img { filter: none; opacity: 1; }
.marca-card span { color: var(--tinta-2); }

/* Testimonios */
.clientes { background: linear-gradient(180deg, rgba(60, 224, 26, .06) 0%, transparent 100%); border-top: 1px solid var(--linea); }
.estrellas { filter: drop-shadow(0 0 6px rgba(245, 179, 1, .45)); }
.puntos button { background: rgba(255, 255, 255, .2); }

/* Banners con borde de luz */
.banner { border: 1px solid rgba(60, 224, 26, .25); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(60, 224, 26, .08); }

/* ---------- Stock ---------- */
.category-filter .box-1 p { color: var(--tinta-2); }
.tag-filter { color: var(--neon) !important; }
.empty-state i { color: var(--tinta-3); }

/* ---------- Ficha ---------- */
.gal-nav { background: rgba(10, 12, 11, .75); color: var(--tinta); border: 1px solid var(--linea); }
.gal-nav:hover { background: var(--neon); color: #04130A; }
.gal-contador { background: rgba(10, 12, 11, .8); border: 1px solid var(--linea); }
.mini.active { box-shadow: 0 0 14px rgba(60, 224, 26, .5); }
.estado-pill { background: rgba(60, 224, 26, .12); color: var(--neon); }
.estado-pill.senado { background: rgba(229, 51, 42, .15); color: #ff6b63; }
.estado-pill.vendido, .aviso-vendido { background: #232a26; color: var(--tinta); }
.caja-precio .nota, .legal-nota { background: rgba(255, 255, 255, .04); color: var(--tinta-2); }
.lightbox { background: rgba(5, 7, 6, .95); }

/* ---------- Contacto, legales, 404 ---------- */
.legal-resumen { background: rgba(60, 224, 26, .08); border: 1px solid rgba(60, 224, 26, .2); }
.legal-indice a { color: var(--tinta-2); }
.legal-indice a.activo { color: var(--neon); background: rgba(60, 224, 26, .1); }
.legal-texto a { color: var(--neon); }
.error-numero span { box-shadow: 0 0 40px rgba(60, 224, 26, .6); color: #04130A; }
.cot-error { color: #ff6b63; }
.cot-nota { color: var(--tinta-3); }
.modal-fondo { background: rgba(0, 0, 0, .7); }

/* ---------- Footer ---------- */
#footer { background: radial-gradient(1000px 360px at 20% 0%, rgba(60, 224, 26, .12), transparent 60%), #070908; border-top: 1px solid rgba(60, 224, 26, .35); }
.footer-top, .footer-bottom, .footer-col-block { border-color: var(--linea) !important; }

/* ---------- Flotantes y avisos ---------- */
.to-top { color: #04130A; }
.toast { background: var(--card-2); border: 1px solid rgba(60, 224, 26, .35); color: var(--tinta); }
.skeleton { background: linear-gradient(90deg, #141917 25%, #1c231f 50%, #141917 75%); background-size: 200% 100%; }