/* =============================================================================
   TIENDA: comparador, relacionados y resultados de búsqueda (Prompt 3, Etapa B, 23/09/2026)
   Autocontenido: lo cargan la home (index.html) y la ficha (inyectado por ficha-extra.js), que
   NO carga valiant-v2.css. Usa las variables de color de cada página con un respaldo propio.
   ============================================================================= */
.vcmp-bar,.vcmp-dlg,.vrel,.vsmart{--vt-bg:var(--bg2,#0B1424);--vt-bg3:var(--bg3,#0F1B30);--vt-ink:var(--white,#F2F6FC);--vt-ink2:var(--silver2,#9DB0C8);--vt-acc:var(--blue2,#40AAFF);--vt-line:var(--hairline,rgba(64,170,255,.18));--vt-ok:var(--green,#22C55E);}

/* ---- botón "Comparar" en cards ---- */
.hc-card{position:relative;}
.hc-card-a{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;}
.hc-cmp{position:absolute;top:10px;right:10px;z-index:2;font:600 12.5px/1 'Exo 2',system-ui,sans-serif;color:var(--white,#F2F6FC);background:rgba(8,14,28,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--hairline,rgba(64,170,255,.25));border-radius:999px;padding:8px 12px;min-height:34px;cursor:pointer;}
.hc-cmp[aria-pressed="true"]{background:var(--blue2,#40AAFF);color:#05060C;border-color:transparent;}
[data-theme="light_valiant"] .hc-cmp:not([aria-pressed="true"]),[data-theme="celeste_gradient_valiant"] .hc-cmp:not([aria-pressed="true"]){background:rgba(255,255,255,.86);color:#0A1120;}

/* ---- bandeja de comparación ---- */
.vcmp-bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:1001;width:min(760px,calc(100% - 24px));background:rgba(8,14,28,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--vt-line);border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.35);}
.vcmp-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;font:400 13.5px/1.3 'Exo 2',system-ui,sans-serif;color:#F2F6FC;}
.vcmp-t{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:#8FCBFF;margin-right:4px;}
.vcmp-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(143,203,255,.3);border-radius:999px;padding:5px 6px 5px 12px;}
.vcmp-chip button{background:none;border:0;color:#9DB0C8;font-size:17px;line-height:1;cursor:pointer;width:26px;height:26px;border-radius:50%;}
.vcmp-hint{color:#9DB0C8;font-size:12.5px;}
.vcmp-go{margin-left:auto;background:#40AAFF;color:#05060C;border:0;border-radius:999px;padding:10px 18px;font:700 13px/1 'Exo 2',system-ui,sans-serif;cursor:pointer;min-height:40px;}
.vcmp-x{background:none;border:0;color:#9DB0C8;font-size:12.5px;cursor:pointer;text-decoration:underline;}
@media(max-width:760px){.vcmp-bar{bottom:calc(12px + env(safe-area-inset-bottom,0px));}body.m-cta-on .vcmp-bar{bottom:calc(84px + env(safe-area-inset-bottom,0px));}}  /* en la home, arriba del CTA fijo */

/* ---- tabla de comparación ---- */
.vcmp-dlg{padding:0;border:0;background:transparent;max-width:min(980px,calc(100vw - 20px));width:100%;color:#F2F6FC;}
.vcmp-dlg::backdrop{background:rgba(3,6,14,.72);backdrop-filter:blur(4px);}
.vcmp-box{background:#0B1424;border:1px solid rgba(64,170,255,.2);border-radius:26px;padding:18px 18px 14px;font:400 14.5px/1.45 'Exo 2',system-ui,sans-serif;}
.vcmp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.vcmp-head h2{font:300 24px/1.1 'Exo 2',system-ui,sans-serif;margin:0;}
.vcmp-cerrar{background:none;border:1px solid rgba(64,170,255,.3);color:#F2F6FC;border-radius:50%;width:40px;height:40px;font-size:22px;cursor:pointer;}
.vcmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.vcmp-tab{width:100%;border-collapse:collapse;min-width:520px;}
.vcmp-tab th,.vcmp-tab td{padding:11px 10px;border-bottom:1px solid rgba(64,170,255,.1);text-align:left;vertical-align:top;}
.vcmp-tab thead th{font-weight:600;font-size:15px;vertical-align:bottom;}
.vcmp-tab thead img{display:block;height:84px;width:auto;max-width:120px;object-fit:contain;margin-bottom:8px;}
.vcmp-tab thead a{color:#F2F6FC;text-decoration:none;border-bottom:1px solid rgba(64,170,255,.4);}
.vcmp-tab tbody th{color:#9DB0C8;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;position:sticky;left:0;background:#0B1424;}
.vcmp-dif td{color:#FFFFFF;font-weight:600;background:rgba(64,170,255,.07);}
.vcmp-nota,.vcmp-load{color:#9DB0C8;font-size:12.5px;margin:10px 2px 0;}

/* ---- relacionados en la ficha ---- */
.vrel{margin:22px 0 6px;display:grid;gap:10px;font-family:'Exo 2',system-ui,sans-serif;}
.vrel-t{font:700 12px/1 'Rajdhani','Exo 2',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--vt-ink2);margin:0 0 2px;}
.vrel-op{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border:1px solid var(--vt-line);border-radius:18px;text-decoration:none;color:var(--vt-ink);background:transparent;}
.vrel-op:hover{border-color:var(--vt-acc);}
.vrel-op b{display:block;font-weight:600;font-size:15px;}
.vrel-op small{display:block;color:var(--vt-ink2);font-size:13px;margin-top:2px;}
.vrel-op em{font-style:normal;white-space:nowrap;font-weight:600;font-size:14px;color:var(--vt-acc);}
.vrel-cmp{justify-self:start;background:none;border:1px solid var(--vt-line);color:var(--vt-ink);border-radius:999px;padding:10px 16px;font:600 13.5px/1 'Exo 2',system-ui,sans-serif;cursor:pointer;min-height:42px;}
.vrel-cmp[aria-pressed="true"]{border-color:var(--vt-acc);color:var(--vt-acc);}

/* ---- resultados de búsqueda estructurada (home) ---- */
.vsmart{max-width:1100px;margin:0 auto 18px;padding:0 20px;font-family:'Exo 2',system-ui,sans-serif;}
.vsmart-t{font-size:13px;color:var(--vt-ink2);margin:0 0 8px;}
.vsmart-t b{color:var(--vt-ink);}
.vsmart-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.vsmart-i{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--vt-line);border-radius:18px;background:var(--vt-bg);text-decoration:none;color:var(--vt-ink);}
.vsmart-i:hover{border-color:var(--vt-acc);}
.vsmart-i img{width:52px;height:52px;object-fit:contain;flex:none;}
.vsmart-i b{display:block;font-size:14.5px;font-weight:600;line-height:1.25;}
.vsmart-i small{display:block;font-size:12.5px;color:var(--vt-ink2);}
.vsmart-i em{font-style:normal;font-size:14px;font-weight:600;white-space:nowrap;margin-left:auto;}
.vsmart-aviso{font-size:12.5px;color:var(--amber,#F59E0B);margin:0 0 8px;}
/* En el celular los 2–3 modelos entran a la vez (antes el segundo quedaba escondido a la derecha). */
@media(max-width:600px){
  .vcmp-box{padding:14px 10px 12px;font-size:13.5px;}
  .vcmp-tab{min-width:0;table-layout:fixed;}
  .vcmp-tab tbody th{white-space:normal;font-size:12px;letter-spacing:.04em;width:26%;}
  .vcmp-tab thead th:first-child{width:26%;}
  .vcmp-tab th,.vcmp-tab td{padding:9px 6px;word-wrap:break-word;}
  .vcmp-tab thead th{font-size:13.5px;}
  .vcmp-tab thead img{height:60px;}
}
.vrel-cmp{text-decoration:none;display:inline-flex;align-items:center;}
/* Bloque 2 (24/09/2026): el buscador de la home lleva al catálogo con la búsqueda hecha. */
.vsmart-todos{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--vt-acc);text-decoration:none;min-height:40px;line-height:40px;}
.vsmart-todos:hover{text-decoration:underline;text-underline-offset:3px;}
/* Bloque 4 (24/09/2026): 40 px mínimos para tocar "＋ Comparar" en el celular (medía 34). */
.hc-cmp{min-height:40px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;}
/* Fase 3 (TEST 1): "Consultar por WhatsApp" debajo de cada tarjeta de la home. */
.hc-card{display:flex;flex-direction:column}
.hc-card .hc-card-a{flex:1 1 auto}
.hc-wa{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;min-height:40px;margin:0 12px 12px;border-radius:999px;border:1px solid rgba(37,211,102,.45);color:#25D366;font:600 13px/1.2 'Exo 2',system-ui,sans-serif;text-decoration:none;background:rgba(37,211,102,.06)}
.hc-wa:hover{background:rgba(37,211,102,.14)}
[data-theme="light_valiant"] .hc-wa,[data-theme="celeste_gradient_valiant"] .hc-wa{color:#128C4A;border-color:rgba(18,140,74,.45)}

/* En celular (2 columnas) "Ver opciones →" se cortaba al lado del estado: baja a otra línea. */
.hc-foot{flex-wrap:wrap;row-gap:6px}