/* ==========================================================
   Estilos de la plataforma — panel y tiendas públicas
   ========================================================== */
:root {
  --tinta: #0f172a;
  --tinta2: #334155;
  --gris: #64748b;
  --linea: #e2e8f0;
  --fondo: #f6f7fb;
  --blanco: #ffffff;
  --primario: #4f46e5;
  --primario-osc: #4338ca;
  --exito: #059669;
  --peligro: #dc2626;
  --wa: #25d366;
  --radio: 14px;
  --sombra: 0 1px 3px rgba(15, 23, 42, .07), 0 8px 24px rgba(15, 23, 42, .06);
  /* color de acento de cada tienda (se sobreescribe por tienda) */
  --acento: #0e7490;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: none; cursor: pointer;
  font: 600 15px/1 'Inter', sans-serif; transition: .18s; text-align: center;
}
.btn-primario { background: linear-gradient(120deg, #6366f1, #a855f7 60%, #ec4899); color: #fff; box-shadow: 0 6px 18px rgba(139, 92, 246, .35); }
.btn-primario:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(139, 92, 246, .42); }
.btn-borde { background: #fff; border: 1px solid var(--linea); color: var(--tinta2); }
.btn-borde:hover { border-color: var(--primario); color: var(--primario); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { filter: brightness(.94); }
.btn-peligro { background: #fef2f2; color: var(--peligro); border: 1px solid #fecaca; }
.btn-chico { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn-bloque { width: 100%; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font: 600 13px/1.4 'Inter'; color: var(--tinta2); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 10px;
  font: 400 15px/1.4 'Inter'; color: var(--tinta); background: #fff; outline: none; transition: border .15s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--primario); }
.campo textarea { min-height: 110px; resize: vertical; }
.campo .ayuda { font-size: 12px; color: var(--gris); margin-top: 5px; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fila-2 { grid-template-columns: 1fr; } }

.alerta { padding: 12px 16px; border-radius: 10px; font-size: 14px; margin-bottom: 16px; }
.alerta-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alerta-ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 24px; }

/* ---------- Insignias de estado ---------- */
.insignia { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 11px/1.4 'Inter'; letter-spacing: .04em; }
.est-NUEVO { background: #eff6ff; color: #1d4ed8; }
.est-CONFIRMADO { background: #f5f3ff; color: #6d28d9; }
.est-EN.RUTA, .est-ENRUTA { background: #fffbeb; color: #b45309; }
.est-ENTREGADO { background: #ecfdf5; color: #047857; }
.est-CANCELADO { background: #fef2f2; color: #b91c1c; }
/* Badge de estado de pago (solo visual) */
.pago-aprobado { background: #ecfdf5; color: #047857; }
.pago-pendiente { background: #fffbeb; color: #b45309; }
.pago-rechazado { background: #fef2f2; color: #b91c1c; }
.pago-cod { background: #f1f5f9; color: #475569; }
/* Badge de estado de ENVÍO / logística */
.env-nuevo { background: #f1f5f9; color: #475569; }
.env-preparado { background: #eff6ff; color: #1d4ed8; }
.env-enviado { background: #fffbeb; color: #b45309; }
.env-entregado { background: #ecfdf5; color: #047857; }

/* Barra de acción masiva de envío (lista de pedidos) */
.masiva { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.masiva .masiva-info { font-size: 13px; color: var(--tinta2); }

/* Barras de "Ventas por origen" en el dashboard */
.barra-origen { height: 9px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.barra-origen-fill { height: 100%; border-radius: 999px; background: var(--primario); }
.barra-origen-fill.canal-tiktok { background: #0f172a; }
.barra-origen-fill.canal-meta { background: #1877f2; }
.barra-origen-fill.canal-pinterest { background: #e60023; }
.barra-origen-fill.canal-google { background: #1a73e8; }
.barra-origen-fill.canal-whatsapp { background: #128c3e; }
.barra-origen-fill.canal-organico { background: #059669; }
.barra-origen-fill.canal-utm { background: #9333ea; }
.barra-origen-fill.canal-referido { background: #64748b; }
.barra-origen-fill.canal-directo { background: #94a3b8; }

/* Badge de ORIGEN de la venta (de dónde vino el pedido) */
.origen { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font: 700 11.5px/1.4 'Inter'; white-space: nowrap; }
.origen .origen-ic { font-size: 12px; line-height: 1; }
.origen-tiktok { background: #0f172a; color: #fff; }
.origen-meta { background: #e7f0ff; color: #1877f2; }
.origen-pinterest { background: #fff0f2; color: #bd081c; }
.origen-google { background: #e8f0fe; color: #1a73e8; }
.origen-whatsapp { background: #e7f9ec; color: #128c3e; }
.origen-organico { background: #ecfdf5; color: #047857; }
.origen-utm { background: #faf0ff; color: #9333ea; }
.origen-referido { background: #f1f5f9; color: #475569; }
.origen-directo { background: #f1f5f9; color: #64748b; }
.origen-nada { background: #f8fafc; color: #94a3b8; }

/* Miniatura de producto en la lista/detalle de pedidos */
.mini-prod { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; object-fit: cover; background: #f1f5f9; border: 1px solid var(--linea); }
.mini-prod.vacia { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }

/* ---------- Detalle de pedido (estilo Shopify) ---------- */
.ped-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.ped-linea { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.ped-linea:last-child { border-bottom: none; }
.ped-linea .nom { font-weight: 600; }
.ped-linea .sub { font-size: 12.5px; color: var(--gris); }
.ped-linea .precio { margin-left: auto; text-align: right; white-space: nowrap; }
.ped-extra-linea { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--linea); font-size: 13.5px; }
.ped-extra-linea .precio { margin-left: auto; color: var(--gris); }
.ped-totales { margin-top: 6px; }
.ped-totales .fila { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; }
.ped-totales .fila.grande { border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 12px; font-weight: 800; font-size: 16px; }
.ped-totales .fila.saldo { color: #b45309; font-weight: 700; }
.ped-dato { padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.ped-dato:last-child { border-bottom: none; }
.ped-dato .et { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin-bottom: 2px; }
.ped-tarjeta-tit { font: 700 13px/1.4 'Inter'; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); margin: 0 0 12px; }
.ped-volver { display: inline-flex; align-items: center; gap: 6px; color: var(--gris); font-size: 13.5px; margin-bottom: 14px; }
@media (max-width: 820px) { .ped-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   PANEL (alumno y admin)
   ========================================================== */
.panel-cuerpo { display: flex; min-height: 100vh; }
.panel-lateral {
  width: 248px; flex: 0 0 248px; color: #cbd5e1;
  background: radial-gradient(120% 55% at 0% 0%, rgba(99,102,241,.20), transparent 62%),
              linear-gradient(185deg, #0f172a 55%, #1e1339);
  border-right: 1px solid rgba(148,163,184,.12);
  display: flex; flex-direction: column; padding: 20px 12px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.panel-logo { font: 800 20px/1 'Inter'; color: #fff; letter-spacing: -.02em; padding: 0 10px 20px; }
.panel-logo span { color: #818cf8; }

/* Etiqueta de grupo ("Tu tienda", "Cuenta") */
.menu-sep { padding: 15px 12px 7px; }
.menu-sep span { font: 700 10.5px/1 'Inter'; letter-spacing: .13em; text-transform: uppercase; color: #6b7a90; }

.panel-menu a {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  font: 600 14px/1 'Inter'; color: #cbd5e1; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.panel-menu a svg { width: 18px; height: 18px; flex: none; opacity: .78; transition: opacity .15s; }
.panel-menu a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-menu a:hover { background: rgba(148,163,184,.13); color: #fff; }
.panel-menu a:hover svg { opacity: 1; }
.panel-menu a:focus-visible { outline: 2px solid #a855f7; outline-offset: 2px; }
.panel-menu a.activo {
  background: linear-gradient(120deg, #6366f1, #a855f7); color: #fff;
  box-shadow: 0 6px 18px rgba(124,58,237,.35);
}
.panel-menu a.activo svg { opacity: 1; }
/* Marca fina pegada al borde izquierdo de la barra */
.panel-menu a.activo::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #c084fc;
}
.menu-ext { margin-left: auto; opacity: .55; font-size: 12px; }
.menu-salir { color: #fca5a5; }
.menu-salir:hover { background: rgba(239,68,68,.15); color: #fecaca; }

.panel-menu-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(148,163,184,.12); }
.panel-pie { padding: 12px 12px 0; font-size: 11.5px; color: #64748b; line-height: 1.5; }
.panel-pie a { color: #94a3b8; text-decoration: underline; }

.panel-main { flex: 1; padding: 32px 36px; max-width: 1060px; }
.panel-titulo { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.panel-titulo h1 { font-size: 26px; margin: 0; letter-spacing: -.02em; }

@media (max-width: 860px) {
  .panel-cuerpo { flex-direction: column; }
  .panel-lateral { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px 14px; gap: 6px; border-right: none; }
  .panel-logo { padding: 0 10px 0 0; font-size: 16px; white-space: nowrap; }
  .panel-menu { display: flex; gap: 4px; }
  .panel-menu a { white-space: nowrap; padding: 9px 12px; margin: 0; }
  .panel-menu a.activo::before { display: none; }
  .menu-sep { display: none; }
  .panel-menu-pie { margin-top: 0; padding-top: 0; border-top: none; }
  .menu-ext { margin-left: 4px; }
  .panel-pie { display: none; }
  .panel-main { padding: 20px 16px; }
}

/* Estadísticas */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.stat .valor { font: 800 28px/1.1 'Inter'; letter-spacing: -.02em; }
.stat .nombre { font-size: 12.5px; color: var(--gris); margin-top: 4px; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
table.tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.tabla th { text-align: left; font: 700 11.5px/1.4 'Inter'; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); padding: 12px 16px; border-bottom: 1px solid var(--linea); background: #f8fafc; }
.tabla td { padding: 13px 16px; border-bottom: 1px solid var(--linea); font-size: 14px; vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }

/* Filtros de pedidos */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.filtros a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; font: 600 13px/1 'Inter'; color: var(--tinta2); }
.filtros a.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* Cuadrícula de productos en el panel */
.grid-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.card-prod { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.card-prod .foto { aspect-ratio: 1; background: #f1f5f9 center/cover no-repeat; }
.card-prod .cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-prod .nombre { font: 600 14.5px/1.35 'Inter'; }
.card-prod .precio { font: 800 16px/1 'Inter'; }
.card-prod .acciones { display: flex; gap: 8px; margin-top: auto; }

/* Página de acceso (login / registro) */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.acceso .caja { width: 100%; max-width: 420px; }
.acceso .marca { text-align: center; font: 800 26px/1 'Inter'; letter-spacing: -.02em; margin-bottom: 22px; }
.acceso .marca span { color: var(--primario); }

/* ==========================================================
   PORTADA DE LA PLATAFORMA
   ========================================================== */
.portada-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 20px 24px; }
.portada-nav .marca { font: 800 22px/1 'Inter'; letter-spacing: -.02em; }
.portada-nav .marca span { color: var(--primario); }
.portada-hero { max-width: 820px; margin: 0 auto; text-align: center; padding: 72px 24px 60px; }
.portada-hero h1 { font: 800 clamp(34px, 6vw, 56px)/1.08 'Inter'; letter-spacing: -.03em; }
.portada-hero h1 em { font-style: normal; color: var(--primario); }
.portada-hero p { font-size: 18px; color: var(--gris); max-width: 560px; margin: 18px auto 30px; }
.portada-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; }
.paso { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra); text-align: left; }
.paso .n { width: 34px; height: 34px; border-radius: 10px; background: #eef2ff; color: var(--primario); display: flex; align-items: center; justify-content: center; font: 800 15px/1 'Inter'; margin-bottom: 12px; }
.paso h3 { font-size: 16px; }
.paso p { font-size: 14px; color: var(--gris); margin: 0; }

/* ==========================================================
   TIENDA PÚBLICA
   ========================================================== */
/* Tema de la tienda: fondo y texto vienen de las variables del <body> (panel
   🎨 Apariencia). Con valores por defecto = blanco + tinta de siempre. */
.tienda-body { background: var(--t-fondo, #fff); color: var(--t-texto, var(--tinta)); }
/* En fondos oscuros, los textos "grises/tinta2" y líneas heredan del texto del
   tema con transparencia, para que se lean bien sobre cualquier color. */
.tienda-body { --gris: color-mix(in srgb, var(--t-texto, #0f172a) 62%, transparent); --tinta2: color-mix(in srgb, var(--t-texto, #0f172a) 82%, transparent); --tinta: var(--t-texto, #0f172a); }
/* Tarjetas y bloques con fondo propio siguen el fondo del tema (mezclado con un
   toque de contraste) para no romper el diseño en temas oscuros. */
.tienda-body .beneficio, .tienda-body .testimonio, .tienda-body .faq-item, .tienda-body .prod-pub, .tienda-body .form-cod { background: color-mix(in srgb, var(--t-fondo, #fff) 92%, var(--t-texto, #000) 3%); }

/* Forma de los botones/CTA del storefront (recto/redondo/pastilla) */
.tienda-body .btn-hero, .tienda-body .prod-pub .cta, .tienda-body .btn-wa, .tienda-body .barra-movil a { border-radius: var(--t-radio-btn, 11px); }
/* El radio que elige el vendedor en el customizer gana al radio del tema. */
.tienda-body .form-cod .btn-comprar, .tienda-body .vc-comprar { border-radius: var(--cf-btn-radio, var(--t-radio-btn, 11px)); }

/* Tipografía real: títulos con la fuente de títulos; el resto con la de cuerpo.
   Prefijamos .tienda-body para ganar a los `font:` cortos que fijaban 'Inter'. */
.tienda-body h1, .tienda-body h2, .tienda-body h3, .tienda-body .titulo-seccion, .tienda-body .tienda-header .nombre, .tienda-body .sec-hero h1 { font-family: var(--fuente-tit), 'Inter', system-ui, sans-serif; }
.tienda-body .prod-pub .nombre, .tienda-body .prod-pub .precio, .tienda-body .prod-pub .cta, .tienda-body .prod-pub .desc-tag, .tienda-body .tienda-banda, .tienda-body .compra .precio, .tienda-body .barra-movil .precio, .tienda-body .barra-movil a, .tienda-body .form-cod .btn-comprar, .tienda-body .form-anuncio { font-family: var(--fuente), 'Inter', system-ui, sans-serif; }

/* Estilos de tarjeta de producto (data-tarjeta en el <body>) */
.tienda-body[data-tarjeta="sombra"] .prod-pub { border-color: transparent; box-shadow: var(--sombra); }
.tienda-body[data-tarjeta="limpio"] .prod-pub { border-color: transparent; background: transparent; }
.tienda-body[data-tarjeta="limpio"] .prod-pub .cuerpo { padding-left: 2px; padding-right: 2px; }

.tienda-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--t-fondo, #fff) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); }
.tienda-header .interior { max-width: var(--t-ancho, 1020px); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.tienda-header img.logo { height: var(--t-logo-alto, 40px); width: auto; max-width: 320px; border-radius: 8px; object-fit: contain; }
.tienda-header .th-marca { min-width: 0; }
.tienda-header .nombre { font: 800 19px/1.1 'Inter'; letter-spacing: -.02em; color: var(--th-txt, inherit); text-decoration: none; display: block; }
.tienda-header .ciudad { font-size: 12px; color: var(--th-txt, var(--gris)); }
.tienda-header .wa { margin-left: auto; }
/* Menú de navegación editable del header */
.tienda-header .th-menu { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.tienda-header .th-menu a { font: 600 14px/1 'Inter'; color: var(--th-txt, var(--tinta)); text-decoration: none; white-space: nowrap; opacity: .88; transition: .15s; }
.tienda-header .th-menu a:hover { opacity: 1; color: var(--acento); }
.tienda-header.con-menu .wa { margin-left: 16px; }
@media (max-width: 820px) {
  .tienda-header.con-menu .interior { flex-wrap: wrap; }
  .tienda-header .th-menu { order: 4; flex-basis: 100%; margin-left: 0; gap: 16px; overflow-x: auto; padding: 2px 0 1px; scrollbar-width: none; }
  .tienda-header .th-menu::-webkit-scrollbar { display: none; }
  .tienda-header.con-menu .wa { margin-left: auto; }
}

.tienda-banda { background: var(--t-banda-bg, var(--acento)); color: var(--t-banda-txt, #fff); text-align: center; font: 600 13.5px/1.4 'Inter'; padding: 9px 16px; }

.tienda-main { max-width: var(--t-ancho, 1020px); margin: 0 auto; padding: 28px 20px 70px; }
.tienda-main h2.titulo-seccion { font-size: 22px; margin: 6px 0 18px; letter-spacing: -.02em; }

.grid-tienda { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
@media (min-width: 700px) { .grid-tienda { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.prod-pub { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: #fff; transition: .18s; display: flex; flex-direction: column; }
.prod-pub:hover { box-shadow: var(--sombra); transform: translateY(-2px); }
.prod-pub .foto { aspect-ratio: var(--t-foto-ar, 1 / 1); background: #f1f5f9 center/cover no-repeat; position: relative; }
/* Ocultar el CTA de la tarjeta si el vendedor lo prefiere (layout más limpio) */
.tienda-body[data-prodcta="ocultar"] .prod-pub .cta { display: none; }
.prod-pub .desc-tag { position: absolute; top: 10px; left: 10px; background: var(--peligro); color: #fff; font: 800 11px/1 'Inter'; padding: 5px 8px; border-radius: 7px; }
.prod-pub .cuerpo { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.prod-pub .nombre { font: 600 14.5px/1.35 'Inter'; }
.prod-pub .precios { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.prod-pub .precio { font: 800 17px/1 'Inter'; color: var(--acento); }
.prod-pub .antes { font-size: 13px; color: var(--gris); text-decoration: line-through; }
.prod-pub .cta { background: var(--acento); color: #fff; text-align: center; font: 700 13px/1 'Inter'; padding: 11px; border-radius: 9px; }

/* Estrellas de reseñas (barra rellena por porcentaje, admite medias estrellas).
   width:max-content es imprescindible: dentro de un contenedor flex en columna el
   inline-block se estiraría a todo el ancho y el relleno de var(--pct) se mediría sobre
   la tarjeta entera en vez de sobre las 5 estrellas (1★ se vería como 3★ doradas). */
.estrellas-bar { display: inline-block; width: max-content; position: relative; font-size: 15px; line-height: 1; color: var(--rev-estrella-off, #d7dde5); white-space: nowrap; --pct: 0%; font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif; }
.estrellas-bar::before { content: '★★★★★'; letter-spacing: 2px; }
.estrellas-bar::after { content: '★★★★★'; letter-spacing: 2px; position: absolute; left: 0; top: 0; width: var(--pct); overflow: hidden; color: var(--rev-estrella, #f5b301); }
.estrellas-bar.grande { font-size: 22px; }

/* Rating cerca del título del producto */
.rating-top { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin: 4px 0 2px; cursor: pointer; }
.rating-top .rating-num { font: 800 14px/1 'Inter'; color: var(--tinta); }
.rating-top .rating-count { font-size: 13px; color: var(--gris); text-decoration: underline; }
.rating-top:hover .rating-count { color: var(--tinta); }

/* ===== Sección de reseñas — MÓVIL PRIMERO (estilo Loox) =====
   Casi todos los compradores llegan desde el teléfono, así que estas reglas describen
   el móvil y más abajo se ensancha para escritorio. Dos variables mandan en el color:
   --rev-acento (botones, chips, barras) y --rev-estrella; las fija el vendedor desde
   su panel, y si no las toca heredan el tema de su tienda. */
/* Scroll suave en la tienda (badge de estrellas → reseñas, botones → formulario).
   Se hace con CSS y no con JS: si el navegador no lo soporta, el enlace salta y ya. */
html:has(.tienda-body) { scroll-behavior: smooth; }

.sec-resenas { --rev-acento: var(--acento, #4f46e5); max-width: 1020px; margin: 0 auto; padding: 6px 16px 34px; scroll-margin-top: 74px; }
.resenas-cab { display: flex; flex-direction: column; gap: 13px; border-top: 1px solid var(--linea); padding-top: 24px; margin-bottom: 16px; }
.resenas-cab h2 { font: 800 22px/1.15 'Inter'; letter-spacing: -.02em; }

.rev-escribir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 48px; padding: 13px 18px; border: 1.5px solid var(--rev-acento); border-radius: 12px;
  background: transparent; color: var(--rev-acento); font: 700 14.5px/1 'Inter'; cursor: pointer;
  transition: background .12s, color .12s, filter .12s; }
.rev-escribir:hover { background: var(--rev-acento); color: #fff; }
.rev-escribir.grande { background: var(--rev-acento); color: #fff; }
.rev-escribir.grande:hover { filter: brightness(1.1); }

.rev-aviso { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }
.rev-aviso.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.rev-aviso.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Producto sin reseñas: limpio y honesto, nada inventado */
.rev-sinnada { text-align: center; border: 1px dashed var(--linea); border-radius: 16px; padding: 30px 20px;
  background: color-mix(in srgb, var(--t-fondo, #fff) 96%, var(--t-texto, #000) 2%); }
.rev-sinnada .estrellas-bar { font-size: 27px; margin-bottom: 12px; }
.rev-sinnada b { display: block; font: 800 17px/1.2 'Inter'; margin-bottom: 6px; }
.rev-sinnada p { color: var(--gris); font-size: 14px; margin: 0 0 18px; }
.rev-sinnada .rev-escribir { max-width: 330px; margin: 0 auto; }

/* Resumen + desglose por estrella (las barras filtran al pulsarlas) */
.resenas-panel { border: 1px solid var(--linea); border-radius: 16px; padding: 16px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--t-fondo, #fff) 96%, var(--t-texto, #000) 2%); }
.rp-prom { display: flex; align-items: center; gap: 15px; }
.rp-num { font: 800 40px/1 'Inter'; color: var(--tinta); letter-spacing: -.02em; }
.rp-lado { min-width: 0; }
.rp-lado .estrellas-bar { font-size: 17px; }
.rp-n { font-size: 12.5px; color: var(--gris); margin-top: 5px; }
.rp-barras { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.rp-barra { display: grid; grid-template-columns: 36px 1fr 36px 24px; align-items: center; gap: 9px; min-height: 36px;
  background: none; border: 1px solid transparent; border-radius: 9px; padding: 4px 6px; cursor: pointer; font: inherit; text-align: left; }
.rp-barra:hover:not(:disabled) { background: color-mix(in srgb, var(--rev-acento) 7%, transparent); }
.rp-barra.activa { border-color: var(--rev-acento); background: color-mix(in srgb, var(--rev-acento) 9%, transparent); }
.rp-barra:disabled { cursor: default; opacity: .5; }
.rpb-lbl { font: 700 12.5px/1 'Inter'; color: var(--tinta); white-space: nowrap; }
.rpb-star { color: var(--rev-estrella, #f5b301); }
.rpb-track { height: 8px; border-radius: 999px; background: #e8edf3; overflow: hidden; }
.rpb-fill { display: block; height: 100%; background: var(--rev-estrella, #f5b301); border-radius: 999px; }
.rpb-pct, .rpb-n { font-size: 11.5px; color: var(--gris); text-align: right; }

/* Fotos de clientes: tira que se desliza con el dedo (se sale del margen a propósito) */
.resenas-fotos { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px 18px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.resenas-fotos::-webkit-scrollbar { display: none; }
.rf-item { position: relative; flex: 0 0 44%; max-width: 200px; aspect-ratio: 1; scroll-snap-align: start;
  border: none; padding: 0; border-radius: 14px; background: #f1f5f9; cursor: zoom-in; overflow: hidden;
  transition: transform .15s, box-shadow .15s; }
.rf-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,.18); }
.rf-item:focus-visible { outline: 3px solid var(--rev-acento); outline-offset: 2px; }
.rf-badge { position: absolute; left: 7px; bottom: 7px; background: rgba(15,23,42,.72); color: var(--rev-estrella, #f5b301);
  font: 700 11px/1 'Inter'; padding: 5px 8px; border-radius: 999px; }
.rf-mas img { filter: brightness(.45); }
.rf-mas .rf-badge { display: none; }
.rf-cont { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 800 22px/1 'Inter'; }

/* Filtros y orden: los chips se deslizan en horizontal, no se amontonan */
.resenas-tools { display: flex; flex-direction: column; gap: 11px; margin-bottom: 15px; }
.rt-chips { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.rt-chips::-webkit-scrollbar { display: none; }
.rt-chip { flex: none; white-space: nowrap; min-height: 38px; border: 1px solid var(--linea); background: var(--t-fondo, #fff);
  color: var(--tinta2); border-radius: 999px; padding: 8px 14px; font: 600 12.5px/1 'Inter'; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; }
.rt-chip b { font-weight: 700; opacity: .55; margin-left: 3px; }
.rt-chip:hover { border-color: var(--rev-acento); color: var(--tinta); }
.rt-chip.activa { background: var(--rev-acento); border-color: var(--rev-acento); color: #fff; }
.rt-chip.activa b { opacity: .8; }
.rt-orden { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gris); white-space: nowrap; }
.rt-orden select { flex: 1; min-height: 40px; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 10px;
  font: 600 12.5px/1 'Inter'; color: var(--tinta); background: var(--t-fondo, #fff); cursor: pointer; }

/* Tarjetas: en móvil una por fila, con la foto grande arriba */
.resenas-masonry { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.resenas-masonry[hidden] { display: none; }
.resena { display: flex; flex-direction: column; border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--t-fondo, #fff) 96%, var(--t-texto, #000) 2%); }
.resena[hidden] { display: none; }
.resena-foto { display: block; width: 100%; border: none; padding: 0; background: #f1f5f9; cursor: zoom-in; line-height: 0; }
.resena-img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: opacity .15s, transform .3s; }
.resena-foto:hover .resena-img { opacity: .94; transform: scale(1.02); }
.resena-foto:focus-visible { outline: 3px solid var(--rev-acento); outline-offset: -3px; }
.resena-cuerpo { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.resena-tit { font: 700 15px/1.3 'Inter'; }
.resena-txt { font-size: 14px; line-height: 1.6; color: var(--tinta2); margin: 0; }
.resena-pie { margin-top: auto; padding-top: 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--gris); }
.resena-autor { font-weight: 700; color: var(--tinta); }
.resena-verif { color: #16a34a; font-weight: 600; }
.resena-fecha { margin-left: auto; }

.rev-vacio { text-align: center; color: var(--gris); font-size: 14px; padding: 26px 0; }
.rev-limpiar { background: none; border: none; color: var(--rev-acento); font: 700 14px/1 'Inter'; cursor: pointer; text-decoration: underline; }
.rev-mas-caja { margin-top: 18px; }
.rev-mas { width: 100%; min-height: 48px; border: 1px solid var(--linea); background: var(--t-fondo, #fff); color: var(--tinta);
  border-radius: 12px; padding: 13px 26px; font: 700 13.5px/1 'Inter'; cursor: pointer; transition: border-color .12s; }
.rev-mas:hover { border-color: var(--rev-acento); }
.rev-mas[hidden] { display: none; }
.rev-cta { margin-top: 22px; }
.rev-cta .btn-comprar { display: block; width: 100%; text-align: center; background: var(--acento); color: #fff;
  font-weight: 800; padding: 16px 24px; border-radius: 12px; text-decoration: none; }

/* Formulario del cliente: hoja que sube desde abajo en móvil */
.rev-modal { position: fixed; inset: 0; z-index: 110; background: rgba(8,12,20,.6); display: flex;
  align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.rev-modal[hidden] { display: none; }
.rev-modal-caja { background: #fff; color: #0f172a; width: 100%; max-width: 520px; border-radius: 20px 20px 0 0;
  max-height: 92vh; overflow-y: auto; padding: 16px 18px 26px; box-shadow: 0 -10px 40px rgba(0,0,0,.35); }
.rev-modal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rev-modal-cab h3 { font: 800 18px/1.2 'Inter'; }
.rev-modal-x { width: 38px; height: 38px; border: none; border-radius: 50%; background: #f1f5f9; color: #334155; font-size: 17px; cursor: pointer; }
.rev-form .campo { margin-bottom: 13px; }
.rev-form label { display: block; font: 600 13px/1 'Inter'; color: #334155; margin-bottom: 6px; }
.rev-form input[type=text], .rev-form textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 13px; font: 400 14.5px/1.4 'Inter'; color: #0f172a; background: #fff; }
.rev-form textarea { min-height: 96px; resize: vertical; }
.rev-form input:focus, .rev-form textarea:focus { outline: 2px solid var(--rev-acento); border-color: transparent; }
.rev-form-nota { font-size: 12.5px; color: #64748b; margin: 4px 0 14px; }

/* Lightbox: foto grande + datos. Las flechas van SIEMPRE bajo la foto, nunca sobre el texto */
.rev-lb { position: fixed; inset: 0; z-index: 100; background: rgba(8,12,20,.9); display: flex; align-items: center;
  justify-content: center; padding: 10px; backdrop-filter: blur(3px); }
.rev-lb[hidden] { display: none; }
.rev-lb-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 900px; max-height: calc(100vh - 76px); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.rev-lb-img { background: #0f172a; display: flex; align-items: center; justify-content: center; flex: none; max-height: 46vh; touch-action: pan-y; }
.rev-lb-img img { max-width: 100%; max-height: 46vh; object-fit: contain; display: block; }
.rev-lb-info { flex: 1; min-height: 0; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; color: #0f172a; }
.rev-lb-nav-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rev-lb-nav { width: 44px; height: 44px; border: 1px solid #e2e8f0; border-radius: 50%; background: #f8fafc; color: #0f172a;
  font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rev-lb-nav:hover { background: #eef2f7; }
.rev-lb-nav[hidden] { display: none; }
.rev-lb-cont { font: 700 11.5px/1 'Inter'; color: #94a3b8; letter-spacing: .06em; text-transform: uppercase; }
.rev-lb-info .estrellas-bar { font-size: 18px; }
.rev-lb-tit { font: 800 17px/1.25 'Inter'; }
.rev-lb-txt { font-size: 14.5px; line-height: 1.6; color: #334155; margin: 0; }
.rev-lb-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid #eef2f7; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: #64748b; align-items: center; }
.rev-lb-pie b { color: #0f172a; }
.rev-lb-verif { color: #16a34a; font-weight: 600; }
.rev-lb-fecha { margin-left: auto; }
.rev-lb-x { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px; cursor: pointer; z-index: 2; }
.rev-lb-x:hover { background: rgba(255,255,255,.3); }

/* ---- Escritorio: se ensancha todo ---- */
@media (min-width: 700px) {
  .sec-resenas { padding: 10px 20px 40px; scroll-margin-top: 84px; }
  .resenas-cab { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 30px; margin-bottom: 20px; }
  .resenas-cab h2 { font-size: clamp(22px, 3vw, 26px); }
  .rev-escribir { width: auto; min-height: 44px; }
  .rev-sinnada { padding: 44px 20px; }

  .resenas-panel { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 10px 34px; align-items: center; padding: 20px 24px; margin-bottom: 22px; }
  .resenas-panel.solo-prom { display: block; }
  .rp-prom { flex-direction: column; text-align: center; gap: 7px; }
  .rp-num { font-size: 46px; }
  .rp-barras { margin-top: 0; padding-top: 0; border-top: none; gap: 5px; }
  .rp-barra { grid-template-columns: 42px 1fr 42px 30px; gap: 10px; }
  .rpb-pct, .rpb-n { font-size: 12px; }

  .resenas-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 0 0 22px; padding: 0; overflow: visible; }
  .rf-item { flex: none; max-width: none; border-radius: 12px; }

  .resenas-tools { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
  .rt-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .rt-chip { min-height: 34px; padding: 7px 13px; }
  .rt-orden select { flex: none; min-height: 36px; }

  .resenas-masonry { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
  .resenas-masonry.masonry-js { grid-auto-rows: 8px; row-gap: 0; }
  .resena-cuerpo { padding: 13px 15px 15px; gap: 7px; }
  .resena-tit { font-size: 14.5px; }
  .resena-txt { font-size: 13.5px; line-height: 1.55; }

  .rev-mas { width: auto; border-radius: 999px; }
  .rev-mas-caja { text-align: center; margin-top: 22px; }
  .rev-cta { text-align: center; margin-top: 26px; }
  .rev-cta .btn-comprar { display: inline-block; width: auto; padding: 15px 32px; border-radius: 11px; }

  .rev-modal { align-items: center; padding: 20px; }
  .rev-modal-caja { border-radius: 18px; padding: 20px 24px 26px; }

  .rev-lb { padding: 20px; }
  .rev-lb-card { flex-direction: row; max-height: 90vh; }
  .rev-lb-img { flex: 1.25; min-width: 0; max-height: 90vh; }
  .rev-lb-img img { max-height: 90vh; }
  .rev-lb-info { min-width: 320px; padding: 22px 24px; }
  .rev-lb-x { top: 16px; right: 18px; }
}

/* Página de producto */
.prod-detalle { display: grid; gap: 28px; max-width: 1020px; margin: 0 auto; padding: 24px 20px 90px; }
@media (min-width: 880px) { .prod-detalle { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.galeria .principal { aspect-ratio: 1; border-radius: var(--radio); background: #f1f5f9 center/cover no-repeat; border: 1px solid var(--linea); }
.galeria .miniaturas { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; }
.galeria .miniaturas button { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; border: 2px solid var(--linea); background: #f1f5f9 center/cover no-repeat; cursor: pointer; padding: 0; }
.galeria .miniaturas button.activa { border-color: var(--acento); }

.compra h1 { font: 800 clamp(22px, 3.4vw, 30px)/1.15 'Inter'; letter-spacing: -.02em; }
.compra .precios { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 4px; }
.compra .precio { font: 800 30px/1 'Inter'; color: var(--acento); }
.compra .antes { font-size: 17px; color: var(--gris); text-decoration: line-through; }
.compra .ahorro { background: #fef2f2; color: var(--peligro); font: 700 12px/1 'Inter'; padding: 5px 9px; border-radius: 7px; }
.compra .descripcion { color: var(--tinta2); font-size: 15px; margin: 14px 0 20px; }
.producto-variantes { margin: 20px 0 16px; display: grid; gap: 16px; }
.pv-grupo { display: grid; gap: 9px; }
.pv-titulo { display: flex; align-items: baseline; gap: 7px; font: 700 14px/1.2 'Inter'; color: var(--tinta); }
.pv-titulo span { color: var(--tinta2); font-weight: 500; }
.pv-valores { display: flex; flex-wrap: wrap; gap: 9px; }
.pv-valor { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; color: var(--tinta); font: 650 14px/1 'Inter'; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.pv-valor:hover:not(:disabled) { border-color: var(--acento); }
.pv-valor.activa { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); background: color-mix(in srgb, var(--acento) 6%, #fff); }
.pv-valor:disabled { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.pv-valor img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; background: var(--fondo); }
.pv-estado { margin: -3px 0 0; font-size: 12.5px; color: #07883d; }
.pv-estado.agotada { color: var(--peligro); font-weight: 700; }
.pv-bloqueado { opacity: .55; pointer-events: none; }
/* La descripción legacy (texto plano) ya sale envuelta en <p> por el saneador,
   así que dejamos de forzar pre-line. El rich-text usa etiquetas reales. */
.cf-rico p { margin: 0 0 10px; }
.cf-rico p:last-child { margin-bottom: 0; }
.cf-rico ul, .cf-rico ol { margin: 0 0 12px; padding-left: 22px; }
.cf-rico li { margin: 3px 0; }
.cf-rico h3, .cf-rico h4 { margin: 14px 0 8px; }
.cf-rico a { color: var(--acento); text-decoration: underline; }
.cf-rico blockquote { border-left: 3px solid var(--linea); margin: 12px 0; padding: 2px 0 2px 14px; color: var(--gris); }

.confianza { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.confianza div { display: flex; align-items: center; gap: 9px; font: 600 12.5px/1.3 'Inter'; color: var(--tinta2); background: #f8fafc; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; }
.confianza svg { flex: 0 0 auto; }

.form-cod { background: #fff; border: 2px solid var(--acento); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.form-cod h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; }
/* El customizer del botón manda por variables. Sin config, los fallbacks son
   exactamente los valores de siempre: el botón no cambia. */
.form-cod .btn-comprar, .vc-comprar { width: 100%; background: var(--t-btn-bg, var(--cf-btn-bg, var(--acento))); color: var(--cf-btn-fg, #fff);
  font: 800 16px/1.2 'Inter'; font-size: var(--cf-btn-tam, 16px); padding: 16px;
  border: var(--cf-btn-borde-ancho, 0) solid var(--cf-btn-borde, transparent); border-radius: var(--cf-btn-radio, 11px);
  cursor: pointer; transition: .18s; }
.form-cod .btn-comprar:hover, .vc-comprar:hover { filter: brightness(.92); }
.form-cod .btn-pagar { width: 100%; background: #009ee3; color: #fff; font: 800 16px/1.2 'Inter'; padding: 16px; border: none; border-radius: 11px; cursor: pointer; transition: .18s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.form-cod .btn-pagar:hover { filter: brightness(.94); }
.form-cod .separador-o { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; color: var(--gris); font-size: 12px; }
.form-cod .separador-o::before, .form-cod .separador-o::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.form-cod .nota { text-align: center; font-size: 12px; color: var(--gris); margin: 10px 0 0; }

/* ===== Diseñador de formulario: botón, iconos, avisos, imágenes ===== */
.vc-comprar { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; margin-bottom: 18px; }
.cf-btn-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.cf-btn-txt small { font-weight: 600; font-size: .74em; opacity: .85; margin-top: 3px; }
.btn-comprar .cf-ico, .vc-comprar .cf-ico { width: 1.15em; height: 1.15em; flex: none; }
.cf-btn-sombra-suave { box-shadow: 0 6px 16px rgba(15, 23, 42, .18); }
.cf-btn-sombra-fuerte { box-shadow: 0 10px 26px rgba(15, 23, 42, .34); }
@keyframes cf-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.032); } }
@keyframes cf-brillo { 0% { filter: brightness(1); } 50% { filter: brightness(1.16); } 100% { filter: brightness(1); } }
.cf-btn-pulso { animation: cf-pulso 1.5s ease-in-out infinite; }
.cf-btn-brillo { animation: cf-brillo 1.8s ease-in-out infinite; }
/* Quien pide menos movimiento, no ve ninguno. */
@media (prefers-reduced-motion: reduce) { .cf-btn-pulso, .cf-btn-brillo { animation: none; } }

.cf-input { position: relative; display: flex; align-items: center; }
.cf-input .cf-ico { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--gris); pointer-events: none; }
.cf-input input, .cf-input select, .cf-input textarea { padding-left: 40px; }
.cf-input textarea { padding-top: 12px; }

.cf-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.45; margin: 0 0 16px; cursor: pointer; }
.cf-check input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--acento); }

.cf-aviso { border-radius: 10px; padding: 11px 13px; font-size: 13px; line-height: 1.45; margin-bottom: 16px; }
.cf-aviso-info { background: #eef4ff; color: #1e40af; border: 1px solid #c7d9fb; }
.cf-aviso-exito { background: #e9f9ef; color: #0f6b37; border: 1px solid #b7e7c9; }
.cf-aviso-alerta { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

.cf-imagen { margin-bottom: 16px; }
.cf-imagen img { display: block; width: 100%; height: auto; border-radius: 10px; }
.cf-img-medio { max-width: 60%; margin-left: auto; margin-right: auto; }

/* Código de descuento: campo + botón "Aplicar" (RONDA 1: presentacional) */
.cf-dct-fila { display: flex; gap: 8px; }
.cf-dct-fila input { flex: 1; min-width: 0; }
.cf-dct-btn { flex: none; padding: 0 16px; border: 1px solid var(--acento); background: #fff; color: var(--acento);
  border-radius: 10px; font: 700 13.5px/1 'Inter'; cursor: pointer; }
.cf-dct-btn:hover { background: color-mix(in srgb, var(--acento) 8%, #fff); }

/* Método de envío: opciones como tarjetas radio */
.cf-envio-ops { display: flex; flex-direction: column; gap: 8px; }
.cf-envio-op { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--linea); border-radius: 11px;
  padding: 12px 14px; cursor: pointer; font-weight: 500; margin: 0; }
.cf-envio-op input { width: auto; flex: none; accent-color: var(--acento); }
.cf-envio-op:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 5%, transparent); }
.cf-envio-nom { flex: 1; font-size: 14px; }
.cf-envio-gratis { font: 800 13px/1 'Inter'; color: #16a34a; }

/* Upsells 1-Tick (RONDA 2: precio real, suman al total) */
.cf-ticks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cf-tick { margin-bottom: 0; }
.cf-tick:has(input:checked) { border-style: solid; background: color-mix(in srgb, var(--acento) 9%, transparent); }
.cf-total-desc { font-size: 13px; color: #16a34a; font-weight: 700; }

/* Downsell: pop-up al cerrar el formulario. A diferencia del formulario (que sin
   JS se ve inline como fallback de checkout), el downsell NO tiene sentido sin JS:
   lo ocultamos siempre salvo cuando el JS lo abre con .vm-abierto. */
.form-cod.vc-down:not(.vm-abierto) { display: none; }
.vc-down-caja { text-align: center; padding-top: 30px; align-items: center; }
.vm-js .vc-down .vm-caja { max-width: 420px; }
.vc-down-emoji { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.vc-down-msg { font: 700 17px/1.35 'Inter'; margin: 0 0 18px; }
.vc-down .btn-comprar { margin-bottom: 10px; }
.vc-down-no { background: none; border: 0; color: var(--gris); font-size: 13.5px; cursor: pointer; padding: 8px; text-decoration: underline; }

/* Upsell tipo checkbox (RONDA 1: solo visual, no suma al total) */
.cf-upsell { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--acento); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 16px; cursor: pointer;
  background: color-mix(in srgb, var(--acento) 4%, transparent); }
.cf-upsell input { width: 20px; height: 20px; flex: none; accent-color: var(--acento); }
.cf-upsell-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cf-upsell-tit { font: 700 14px/1.25 'Inter'; }
.cf-upsell-sub { font-size: 12.5px; color: var(--gris); line-height: 1.35; }
.cf-upsell-precio { flex: none; font: 800 15px/1 'Inter'; color: var(--acento); }

/* ===== Pop-up del formulario (vm- = vendeya modal) =====
   Sin JS no existe .vm-js: el formulario se queda en la página, como siempre. */
.vm-js .form-cod.vm-modal { position: fixed; inset: 0; z-index: 90; display: none;
  align-items: flex-end; justify-content: center; padding: 0;
  background: rgba(15, 23, 42, .58); border: 0; border-radius: 0; box-shadow: none; }
.vm-js .form-cod.vm-modal.vm-abierto { display: flex; }
.vm-js .form-cod.vm-modal .vm-caja { position: relative; background: #fff; width: 100%; max-width: 520px;
  max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid var(--acento); border-radius: 18px 18px 0 0; padding: 20px 18px 0;
  animation: vm-sube .22s ease-out; }
@keyframes vm-sube { from { transform: translateY(22px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vm-js .form-cod.vm-modal .vm-caja { animation: none; } }
/* El scroll vive DENTRO del pop-up: al abrir el teclado, los campos siguen alcanzables. */
.vm-js .form-cod.vm-modal .vm-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
.vm-js .form-cod.vm-modal h3 { padding-right: 40px; }
.vm-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--linea); background: #fff; color: var(--tinta2); font-size: 15px; line-height: 1;
  cursor: pointer; display: none; }
.vm-js .form-cod.vm-modal .vm-x { display: block; }
.vm-x:hover { background: var(--fondo); }
/* Encabezado con color propio. Sin color elegido, --cf-hdr-pad no existe y el
   título se pinta como siempre (sin caja). */
.form-cod h3 { background: var(--cf-hdr-bg, transparent); color: var(--cf-hdr-fg, inherit);
  padding: var(--cf-hdr-pad, 0); border-radius: var(--cf-hdr-radio, 0); }

body.vm-bloqueado { position: fixed; width: 100%; overflow: hidden; }
/* Con el pop-up abierto nada más compite por la pantalla. */
body.vm-bloqueado .vc-wa, body.vm-bloqueado .vc-pop, body.vm-bloqueado .barra-movil { display: none !important; }

@media (min-width: 880px) {
  .vm-js .form-cod.vm-modal { align-items: center; padding: 24px; }
  .vm-js .form-cod.vm-modal .vm-caja { border-radius: 18px; max-height: 88vh; }
}

/* Ofertas por cantidad */
.ofertas-cant { display: flex; flex-direction: column; gap: 10px; }
.oferta-op { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; border: 2px solid var(--linea); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.oferta-op input { grid-row: span 2; width: 20px; height: 20px; accent-color: var(--acento); }
.oferta-op .oferta-cant { font-weight: 700; font-size: 15px; }
.oferta-op .oferta-precio { font-weight: 800; font-size: 16px; color: var(--acento); text-align: right; }
.oferta-op .oferta-unit { grid-column: 2 / 4; font-size: 12px; color: var(--gris); text-align: right; }
.oferta-op .oferta-tag { grid-column: 2; justify-self: start; background: var(--acento); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing: .3px; }
.oferta-op.sel { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 7%, #fff); }
.oferta-op.destacada { box-shadow: 0 0 0 1px var(--acento); }
.total-pedido { text-align: center; font-size: 16px; margin: 14px 0 12px; }
.total-pedido b { font-size: 19px; color: var(--acento); }
/* Verificación OTP */
.otp-caja { border: 1px dashed var(--linea); border-radius: 10px; padding: 12px; background: #fafafa; }
/* Encabezado configurable del formulario */
.form-anuncio { background: var(--acento); color: #fff; text-align: center; font: 700 12.5px/1.4 'Inter'; padding: 8px 12px; border-radius: 10px; margin-bottom: 12px; }
.form-subtitulo { color: var(--gris); font-size: 13.5px; margin: -4px 0 12px; }
/* Editor de formulario (panel) */
.campo-editor { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fff; }
.campo-editor .ce-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.campo-editor .ce-nombre { font-weight: 700; font-size: 14px; }
.campo-editor .ce-orden { display: flex; gap: 6px; }
.campo-editor .ce-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 16px; font-weight: 400; }
.campo-editor .ce-chk input { width: auto; }
.campo-editor.oculto { opacity: .55; }
/* Upsell post-compra */
.upsell-caja { border: 2px solid var(--acento); border-radius: 14px; padding: 16px; margin: 4px 0 16px; text-align: left; }
.upsell-titulo { font-weight: 800; font-size: 15px; margin-bottom: 10px; text-align: center; }
.upsell-prod { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.upsell-prod img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; }
.upsell-nombre { font-weight: 600; font-size: 14px; line-height: 1.3; }
.upsell-precio { font-weight: 800; color: var(--acento); font-size: 16px; margin-top: 2px; }
.cantidad-caja { display: flex; align-items: center; gap: 0; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; width: max-content; }
.cantidad-caja button { width: 42px; height: 42px; border: none; background: #f8fafc; font: 700 18px/1 'Inter'; cursor: pointer; }
.cantidad-caja input { width: 54px; height: 42px; border: none; text-align: center; font: 700 15px/1 'Inter'; outline: none; }

/* Barra fija de compra en el celular */
.barra-movil { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: #fff; border-top: 1px solid var(--linea); padding: 10px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 -6px 20px rgba(15,23,42,.08); }
.barra-movil .precio { font: 800 18px/1 'Inter'; color: var(--acento); }
.barra-movil .antes { font-size: 12px; color: var(--gris); text-decoration: line-through; }
.barra-movil a { flex: 1; background: var(--t-btn-bg, var(--acento)); color: #fff; text-align: center; font: 800 14px/1 'Inter'; padding: 14px; border-radius: 10px; }
@media (min-width: 880px) { .barra-movil { display: none; } }

/* Página de gracias */
.gracias { max-width: 560px; margin: 0 auto; padding: 60px 20px 90px; text-align: center; }
.gracias .icono { width: 84px; height: 84px; border-radius: 50%; background: #ecfdf5; color: var(--exito); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.gracias h1 { font: 800 28px/1.15 'Inter'; letter-spacing: -.02em; }
.gracias .resumen { text-align: left; background: #f8fafc; border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; margin: 22px 0; font-size: 14.5px; }
.gracias .resumen div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px dashed var(--linea); }
.gracias .resumen div:last-child { border-bottom: none; }
.gracias .resumen b { text-align: right; }

/* Galería deslizable del producto */
/* min-width:0 deja que el carrusel (y su celda de grid .galeria) se encojan al
   ancho de pantalla: sin esto, las fotos a 100% inflan la celda y la página hace
   scroll horizontal en móvil. Los slides siguen deslizando dentro del carrusel. */
.galeria { min-width: 0; }
.g-carrusel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 1; border-radius: var(--radio); border: 1px solid var(--linea); background: #f1f5f9; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.g-carrusel::-webkit-scrollbar { display: none; }
.g-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; scroll-snap-stop: always; }
.g-vacia { display: flex; align-items: center; justify-content: center; font-size: 70px; }
.g-puntos { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.g-puntos button { width: 8px; height: 8px; border-radius: 99px; border: none; background: #cbd5e1; cursor: pointer; padding: 0; transition: .25s; }
.g-puntos button.activa { background: var(--acento); width: 24px; }
.solo-pc { display: none; }
@media (min-width: 880px) {
  .solo-pc { display: flex; }
  .g-puntos { display: none; }
}

/* Botón flotante de WhatsApp (atención al cliente).
   Prefijo vc- a propósito: los bloqueadores esconden clases con "ad"/"ads". */
.vc-wa { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.vc-wa-izq { right: auto; left: 16px; align-items: flex-start; }
/* En la ficha de producto hay una barra fija de compra en el celular: subimos la burbuja */
@media (max-width: 879px) { .vc-wa-sube { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

.vc-wa-btn { position: relative; width: 56px; height: 56px; border: none; padding: 0; border-radius: 50%;
  background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(37, 211, 102, .45); cursor: pointer; transition: transform .2s; }
.vc-wa-btn:hover { transform: scale(1.07); }
.vc-wa-btn:focus-visible { outline: 3px solid #0f172a; outline-offset: 3px; }
/* La onda solo late cuando el panel está cerrado */
.vc-wa-btn::before { content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .45); animation: vc-wa-onda 2.2s ease-out infinite; }
.vc-wa-btn.vc-wa-abierto::before { display: none; }
@keyframes vc-wa-onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vc-wa-btn::before { animation: none; } }

/* Lista de agentes */
.vc-wa-caja { width: min(320px, calc(100vw - 32px)); background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .28); border: 1px solid rgba(15,23,42,.06); }
.vc-wa-caja[hidden] { display: none; }
.vc-wa-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: #128C7E; color: #fff; padding: 14px 14px 13px; }
.vc-wa-cab b { display: block; font: 700 14.5px/1.25 'Inter'; }
.vc-wa-cab span { font-size: 12px; opacity: .85; }
.vc-wa-x { width: 28px; height: 28px; flex: none; border: none; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; font-size: 13px; cursor: pointer; }
.vc-wa-x:hover { background: rgba(255,255,255,.3); }
.vc-wa-lista { max-height: min(52vh, 380px); overflow-y: auto; padding: 6px; }
.vc-wa-agente { display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 12px;
  min-height: 60px; text-decoration: none; color: #0f172a; }
.vc-wa-agente:hover, .vc-wa-agente:active { background: #f1f5f9; }
.vc-wa-ini { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #128C7E; color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 17px/1 'Inter'; }
.vc-wa-datos { flex: 1; min-width: 0; }
.vc-wa-datos b { display: block; font: 700 14px/1.3 'Inter'; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-wa-datos span { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vc-wa-ir { flex: none; color: #25D366; display: flex; }
.vc-wa-ir svg { width: 22px; height: 22px; }

/* Los campos de la tienda usan 16px: iPhone NO hace zoom al tocarlos */
.tienda-body .campo input, .tienda-body .campo select, .tienda-body .campo textarea { font-size: 16px; }
.tienda-body .form-cod .btn-comprar, .tienda-body .vc-comprar { font-size: var(--cf-btn-tam, 17px); padding: 17px; }

/* Barra fija con espacio para celulares con "notch" */
.barra-movil { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }

/* Ajustes finos SOLO para celular */
@media (max-width: 640px) {
  .sec { padding: 32px 16px; }
  .sec-hero { padding: 52px 18px; }
  .sec-hero .btn-hero { display: block; margin: 0 auto; max-width: 320px; }
  .tienda-header .interior { padding: 10px 14px; }
  .tienda-header .nombre { font-size: 16.5px; }
  .prod-detalle { padding: 14px 14px 96px; gap: 18px; }
  .compra h1 { font-size: 23px; }
  .compra .precio { font-size: 27px; }
  .form-cod { padding: 18px 15px; }
  .grid-tienda { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .prod-pub .cuerpo { padding: 11px 12px 13px; }
  .prod-pub .cta { padding: 12px 8px; font-size: 12.5px; }
  .confianza { gap: 8px; }
  .confianza div { padding: 9px 10px; font-size: 12px; }
  /* Testimonios: se deslizan con el dedo */
  .tienda-body .grid-testimonios { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 4px 2px 10px; scrollbar-width: none; }
  .tienda-body .grid-testimonios::-webkit-scrollbar { display: none; }
  .tienda-body .grid-testimonios .testimonio { flex: 0 0 84%; scroll-snap-align: center; }
  .beneficio { padding: 20px 14px; }
  .sec-ti .ti-img { aspect-ratio: 16/10; }
  .gracias { padding: 44px 18px 90px; }
  .vc-wa-btn { width: 52px; height: 52px; }
}

/* Pie de tienda */
.tienda-pie { border-top: 1px solid var(--linea); padding: 26px 20px 110px; text-align: center; color: var(--gris); font-size: 13px; background: #f8fafc; }
.tienda-pie a { color: inherit; }

/* Barra de anuncios superior clicable (mismo look que la banda, con hover) */
.tienda-banda-link { display: block; text-decoration: none; cursor: pointer; transition: filter .15s; }
.tienda-banda-link:hover { filter: brightness(1.08); }

/* Footer personalizado (editado desde 🎨 Diseño → Footer) */
.tienda-pie.pie-plus {
  background: color-mix(in srgb, var(--t-fondo, #fff) 88%, var(--t-texto, #000) 6%);
  color: var(--t-texto, var(--tinta)); text-align: left; padding: 40px 20px 110px;
}
.pie-plus .pie-interior { max-width: var(--t-ancho, 1020px); margin: 0 auto; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pie-plus .pie-interior { grid-template-columns: 1.2fr 2fr; align-items: start; } }
.pie-plus .pie-nombre { display: flex; align-items: center; gap: 10px; }
.pie-plus .pie-nombre img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.pie-plus .pie-nombre b { font-size: 18px; }
.pie-plus .pie-texto { font-size: 13.5px; line-height: 1.6; margin: 12px 0 14px; opacity: .82; max-width: 340px; }
.pie-plus .pie-redes { display: flex; gap: 10px; }
.pie-plus .pie-redes a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--t-texto, #0f172a) 8%, transparent); color: inherit; transition: .15s; }
.pie-plus .pie-redes a:hover { background: var(--acento); color: #fff; transform: translateY(-2px); }
.pie-plus .pie-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 22px; }
.pie-plus .pie-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-bottom: 10px; }
.pie-plus .pie-col a, .pie-plus .pie-col span { display: block; font-size: 13.5px; line-height: 1.5; margin-bottom: 7px; text-decoration: none; opacity: .9; }
.pie-plus .pie-col a:hover { opacity: 1; text-decoration: underline; }
.pie-plus .pie-legal { max-width: var(--t-ancho, 1020px); margin: 28px auto 0; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--t-texto, #0f172a) 12%, transparent); font-size: 12.5px; opacity: .7; text-align: center; }

.pagina-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; }

/* ==========================================================
   Tipografía por tienda (elegida en el panel)
   ========================================================== */
.tienda-body, .tienda-body button, .tienda-body input, .tienda-body select, .tienda-body textarea {
  font-family: var(--fuente, 'Inter'), 'Inter', system-ui, sans-serif;
}

/* ==========================================================
   SECCIONES DEL CONSTRUCTOR (tienda pública)
   ========================================================== */
.sec { max-width: var(--t-ancho, 1020px); margin: 0 auto; padding: 44px 20px; }

/* Portada principal */
.sec-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #000)); color: #fff; text-align: center; padding: 72px 20px; }
.sec-hero.con-imagen { background: #111 center/cover no-repeat; }
.sec-hero .velo { position: absolute; inset: 0; background: rgba(10, 15, 25, .52); }
.sec-hero .contenido { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.sec-hero h1 { font-size: clamp(30px, 6vw, 52px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.sec-hero p { font-size: clamp(15px, 2.4vw, 19px); opacity: .92; margin: 0 auto 26px; max-width: 540px; }
.sec-hero .btn-hero { display: inline-block; background: #fff; color: #0f172a; font-weight: 800; font-size: 15px; padding: 15px 34px; border-radius: 11px; transition: .18s; }
.sec-hero .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }

/* Hero avanzado (Fase 4): color de texto, alineación y altura */
.sec-hero { color: var(--hero-txt, #fff); }
.sec-hero.hero-al-izq { text-align: left; }
.sec-hero.hero-al-izq .contenido { margin: 0; margin-right: auto; }
.sec-hero.hero-al-der { text-align: right; }
.sec-hero.hero-al-der .contenido { margin: 0; margin-left: auto; }
.sec-hero.hero-al-centro { text-align: center; }
.sec-hero.hero-alt-baja { padding-top: 44px; padding-bottom: 44px; }
.sec-hero.hero-alt-media { padding-top: 72px; padding-bottom: 72px; }
.sec-hero.hero-alt-alta { padding-top: 120px; padding-bottom: 120px; }
.sec-hero.hero-al-izq .btn-hero, .sec-hero.hero-al-der .btn-hero { margin: 0; }

/* Solo lectores de pantalla / SEO (no visible pero presente en el DOM) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ==========================================================
   EDITOR DE TIENDA (estilo Shopify Theme Editor) — full screen
   ========================================================== */
.ed-body { margin: 0; overflow: hidden; background: #f1f3f5; }
.ed-shell { display: grid; grid-template-rows: 54px 1fr; grid-template-columns: 348px 1fr; height: 100vh; height: 100dvh; }

/* Topbar */
.ed-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); z-index: 10; }
.ed-salir { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #475569; font-size: 20px; text-decoration: none; transition: .15s; }
.ed-salir:hover { background: #f1f5f9; color: #0f172a; }
.ed-brand { display: flex; align-items: center; gap: 10px; }
.ed-brand-sub { font: 600 13px/1 'Inter'; color: #64748b; border-left: 1px solid #e5e7eb; padding-left: 10px; }
.ed-top-centro { flex: 1; display: flex; justify-content: center; }
.ed-device { display: inline-flex; background: #f1f5f9; border-radius: 9px; padding: 3px; gap: 2px; }
.ed-dev { width: 34px; height: 28px; border: none; background: transparent; border-radius: 7px; color: #64748b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.ed-dev.on { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.ed-top-acciones { display: flex; align-items: center; gap: 8px; }
.ed-btn-ghost { border: 1px solid #e5e7eb; background: #fff; color: #334155; font: 600 13px/1 'Inter'; padding: 8px 12px; border-radius: 9px; cursor: pointer; text-decoration: none; transition: .15s; }
.ed-btn-ghost:hover { border-color: #cbd5e1; background: #f8fafc; }
.ed-guardado { font: 600 12px/1 'Inter'; color: #16a34a; padding-left: 4px; min-width: 92px; text-align: right; }

/* Sidebar + vistas deslizantes */
.ed-sidebar { position: relative; overflow: hidden; background: #fff; border-right: 1px solid #e5e7eb; }
.ed-vista { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); z-index: 2; }
.ed-vista[data-vista="home"] { transform: translateX(0); z-index: 1; }
.ed-vista.activa { transform: translateX(0); }
.ed-vista:not(.activa):not([data-vista="home"]) { pointer-events: none; }

.ed-vista-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid #eef1f4; }
.ed-vista-head h2 { font: 800 16px/1 'Inter'; letter-spacing: -.01em; }
.ed-back { width: 32px; height: 32px; border: none; background: #f1f5f9; border-radius: 8px; color: #334155; font-size: 18px; cursor: pointer; transition: .15s; }
.ed-back:hover { background: #e2e8f0; }
.ed-panel-cuerpo { flex: 1; overflow-y: auto; padding: 16px; }
.ed-vista-pie { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #eef1f4; background: #fff; }
.ed-vista-pie .ed-btn-primario { flex: 1; }

/* Grupos (Tema/Header/Footer/Páginas) */
.ed-grupos { padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 4px; }
.ed-grupo-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: transparent; padding: 11px 12px; border-radius: 11px; cursor: pointer; transition: .14s; font: 700 14px/1.2 'Inter'; color: #0f172a; }
.ed-grupo-btn span:first-child { font-size: 20px; }
.ed-grupo-btn small { display: block; font: 400 11.5px/1.3 'Inter'; color: #94a3b8; margin-top: 2px; }
.ed-grupo-btn:hover { background: #f1f5f9; }
.ed-grupo-btn::after { content: '›'; margin-left: auto; color: #cbd5e1; font-size: 18px; }

.ed-sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 16px 8px; border-top: 1px solid #eef1f4; margin-top: 6px; }
.ed-sec-head h2 { font: 800 13px/1 'Inter'; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.ed-sec-head span { font-size: 11px; color: #94a3b8; }

/* Lista de secciones */
.ed-lista { padding: 4px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.ed-fila { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; transition: background .12s; }
.ed-fila:hover { background: #f6f8fa; }
.ed-fila.apagada { opacity: .5; }
.ed-fila.arrastrando { opacity: .5; background: #eef2ff; }
.ed-fila.vy-sel { background: #eef2ff; box-shadow: inset 0 0 0 1.5px var(--primario); }
.ed-asa { color: #cbd5e1; cursor: grab; font-size: 14px; }
.ed-asa:active { cursor: grabbing; }
.ed-fila-ico { font-size: 17px; width: 22px; text-align: center; }
.ed-fila-info { flex: 1; min-width: 0; border: none; background: transparent; text-align: left; cursor: pointer; padding: 4px 0; }
.ed-fila-tit { display: block; font: 600 13.5px/1.2 'Inter'; color: #0f172a; }
.ed-fila-sub { display: block; font: 400 11.5px/1.2 'Inter'; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ed-fila-btn { width: 30px; height: 30px; border: none; background: transparent; border-radius: 8px; cursor: pointer; font-size: 14px; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ed-fila-btn:hover { background: #eef1f4; }
.ed-add { margin: 8px 14px 16px; padding: 11px; border: 1.5px dashed #cbd5e1; border-radius: 11px; background: #fff; color: var(--primario); font: 700 13.5px/1 'Inter'; cursor: pointer; transition: .15s; }
.ed-add:hover { border-color: var(--primario); background: #f5f6ff; }

/* Picker de tipos */
.ed-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-tipo { display: flex; flex-direction: column; gap: 3px; text-align: left; border: 1px solid #e5e7eb; background: #fff; border-radius: 12px; padding: 12px; cursor: pointer; transition: .15s; }
.ed-tipo:hover { border-color: var(--primario); box-shadow: 0 6px 16px rgba(79,70,229,.12); transform: translateY(-1px); }
.ed-tipo-ico { font-size: 22px; }
.ed-tipo-nom { font: 700 13px/1.2 'Inter'; }
.ed-tipo-desc { font: 400 11px/1.35 'Inter'; color: #94a3b8; }

/* Grupos de campos dentro de una vista */
.ed-grupo { border: 1px solid #eef1f4; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.ed-grupo-tit { font: 700 12px/1 'Inter'; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 12px; }
.ed-color-row { display: flex; gap: 8px; align-items: center; }
.ed-color-row input[type="color"] { height: 40px; width: 54px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; }
.ed-usar { font-weight: 400 !important; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.ed-estilo { border: 1px solid #eef1f4; border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.ed-estilo > summary { cursor: pointer; font: 700 13px/1 'Inter'; list-style: none; }
.ed-estilo > summary span { font-weight: 400; color: #94a3b8; font-size: 11.5px; }
.ed-campos .campo { margin-bottom: 12px; }
.ed-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

/* Botones del editor */
.ed-btn-primario { background: var(--primario); color: #fff; border: none; border-radius: 10px; padding: 11px 16px; font: 700 14px/1 'Inter'; cursor: pointer; transition: .15s; }
.ed-btn-primario:hover { filter: brightness(1.06); }
.ed-btn-primario:disabled { opacity: .6; cursor: default; }
.ed-btn-danger { background: #fff; color: var(--peligro); border: 1px solid #fecaca; border-radius: 10px; padding: 11px 16px; font: 700 14px/1 'Inter'; cursor: pointer; }
.ed-btn-danger:hover { background: #fef2f2; }
.ed-full { width: 100%; }

/* Vista previa */
.ed-preview { position: relative; display: flex; align-items: stretch; justify-content: center; background: #eceef1; padding: 0; overflow: hidden; }
.ed-preview iframe { width: 100%; height: 100%; border: none; background: #fff; transition: width .28s ease, max-width .28s ease; }
.ed-preview.movil { padding: 24px; align-items: flex-start; }
.ed-preview.movil iframe { width: 390px; max-width: 100%; height: calc(100% - 48px); border-radius: 26px; box-shadow: 0 12px 40px rgba(15,23,42,.22); border: 8px solid #0f172a; }

@media (max-width: 900px) {
  .ed-shell { grid-template-columns: 1fr; grid-template-rows: 54px 1fr; }
  .ed-preview { display: none; }
}

/* Hub de integraciones (tarjetas) */
.integra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.integra-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px 16px 14px; text-decoration: none; color: inherit; transition: .16s; }
.integra-card:hover { border-color: var(--primario); box-shadow: 0 8px 22px rgba(79,70,229,.12); transform: translateY(-2px); }
.integra-card .ic-top { display: flex; align-items: center; justify-content: space-between; }
.integra-card .ic-ico { font-size: 26px; }
.integra-card .ic-estado { font-size: 11px; font-weight: 700; color: var(--gris); background: #f1f5f9; padding: 4px 9px; border-radius: 999px; }
.integra-card .ic-estado.on { color: #15803d; background: #dcfce7; }
.integra-card .ic-nombre { font-weight: 800; font-size: 15.5px; margin-top: 4px; }
.integra-card .ic-que { font-size: 13px; color: var(--tinta2); }
.integra-card .ic-para { font-size: 12.5px; color: var(--gris); line-height: 1.5; }
.integra-card .ic-cta { font-size: 13px; font-weight: 700; color: var(--primario); margin-top: 6px; }

/* Estilo universal por sección (fondo/texto/alineación/espaciado propios).
   La envoltura es full-width; las secciones centradas siguen centradas dentro,
   así el color de fondo forma una banda a todo el ancho (estilo Shopify). */
.sec-envoltura { position: relative; }
.sec-envoltura[data-pad="compacto"] > section:not(.sec-hero):not(.sec-slideshow):not(.sec-bannercta):not(.sec-oferta-timer) { padding-top: 16px; padding-bottom: 16px; }
/* Modo editor: seleccionar secciones desde la vista previa (Theme Editor) */
.sec-editable { cursor: pointer; }
.sec-editable.vy-sel { outline: 3px solid var(--acento, #4f46e5); outline-offset: -3px; }

/* Carrusel de portada (slideshow) */
.sec-slideshow { position: relative; max-width: var(--t-ancho, 1240px); margin: 0 auto; overflow: hidden; }
.sec-slideshow .ss-pista { position: relative; width: 100%; aspect-ratio: 1200 / 400; background: color-mix(in srgb, var(--t-fondo, #fff) 92%, var(--t-texto, #000) 4%); }
.sec-slideshow .ss-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; display: block; }
.sec-slideshow .ss-slide.activa { opacity: 1; }
.sec-slideshow .ss-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec-slideshow .ss-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255,255,255,.82); color: #0f172a; font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.15); transition: .15s; }
.sec-slideshow .ss-flecha:hover { background: #fff; }
.sec-slideshow .ss-prev { left: 12px; }
.sec-slideshow .ss-next { right: 12px; }
.sec-slideshow .ss-puntos { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.sec-slideshow .ss-punto { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: .15s; }
.sec-slideshow .ss-punto.activa { background: #fff; width: 22px; border-radius: 5px; }
@media (max-width: 700px) { .sec-slideshow .ss-flecha { width: 32px; height: 32px; font-size: 20px; } }

/* Banner con botón (banner-cta) */
.sec-bannercta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #000)); color: #fff; text-align: center; padding: 46px 20px; }
.sec-bannercta.con-imagen { background: #111 center/cover no-repeat; }
.sec-bannercta .velo { position: absolute; inset: 0; background: rgba(10, 15, 25, .5); }
.sec-bannercta .bc-contenido { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }
.sec-bannercta h2 { font-size: clamp(22px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.sec-bannercta p { font-size: clamp(14px, 2.2vw, 17px); opacity: .92; margin: 0 auto 20px; max-width: 520px; }
.sec-bannercta .btn-hero { display: inline-block; background: #fff; color: #0f172a; font-weight: 800; font-size: 15px; padding: 14px 32px; transition: .18s; }
.sec-bannercta .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }

/* Galería / logos de confianza */
.galeria-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; align-items: center; }
.galeria-logos .gl-item { aspect-ratio: 3 / 2; background: color-mix(in srgb, var(--t-fondo, #fff) 92%, var(--t-texto, #000) 4%) center/contain no-repeat; border: 1px solid var(--linea); border-radius: 12px; }

/* Oferta con temporizador */
.sec-oferta-timer { background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #000)); color: #fff; text-align: center; padding: 48px 20px; }
.sec-oferta-timer .ot-contenido { max-width: 640px; margin: 0 auto; }
.sec-oferta-timer h2 { font-size: clamp(22px, 4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.sec-oferta-timer p { font-size: clamp(14px, 2.2vw, 17px); opacity: .92; margin: 0 auto 22px; max-width: 520px; }
.sec-oferta-timer .ot-reloj { display: inline-flex; gap: 10px; margin-bottom: 24px; }
.sec-oferta-timer .ot-cel { background: rgba(255, 255, 255, .16); border-radius: 12px; padding: 10px 6px; min-width: 62px; backdrop-filter: blur(4px); }
.sec-oferta-timer .ot-num { display: block; font: 800 26px/1 'Inter'; font-variant-numeric: tabular-nums; }
.sec-oferta-timer .ot-cel small { font-size: 11px; opacity: .8; text-transform: uppercase; letter-spacing: .05em; }
.sec-oferta-timer .btn-hero { display: inline-block; background: #fff; color: #0f172a; font-weight: 800; font-size: 15px; padding: 14px 34px; border-radius: 11px; transition: .18s; }
.sec-oferta-timer .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.sec-oferta-timer.ot-fin { opacity: .78; }
@media (max-width: 560px) { .sec-oferta-timer .ot-cel { min-width: 52px; } .sec-oferta-timer .ot-num { font-size: 22px; } }

/* Beneficios */
.sec-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.beneficio { text-align: center; padding: 26px 18px; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; }
.beneficio .icono { font-size: 34px; margin-bottom: 10px; }
.beneficio h3 { font-size: 16px; margin-bottom: 6px; }
.beneficio p { font-size: 13.5px; color: var(--gris); margin: 0; }

/* Texto + imagen */
.sec-ti { display: grid; gap: 26px; align-items: center; }
@media (min-width: 760px) { .sec-ti { grid-template-columns: 1fr 1fr; } .sec-ti.lado-der .ti-img { order: 2; } }
.sec-ti .ti-img { aspect-ratio: 4/3; border-radius: var(--radio); background: #f1f5f9 center/cover no-repeat; border: 1px solid var(--linea); display: flex; align-items: center; justify-content: center; font-size: 44px; }
.sec-ti h2 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; }
.sec-ti p { color: var(--tinta2); white-space: pre-line; }

/* Testimonios */
.sec-testimonios h2, .sec-faq h2 { text-align: center; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -.02em; margin-bottom: 26px; }
.grid-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.testimonio { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); }
.testimonio .estrellas { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.testimonio .texto { font-size: 14.5px; color: var(--tinta2); font-style: italic; }
.testimonio .quien { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.testimonio .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--acento); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.testimonio .nombre { font-weight: 700; font-size: 13.5px; }

/* Preguntas frecuentes */
.sec-faq { max-width: 760px; }
.faq-item { background: #fff; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--acento); font-weight: 800; }
.faq-item[open] summary::after { content: '−'; }
.faq-item .respuesta { padding: 0 18px 16px; color: var(--tinta2); font-size: 14.5px; }

/* Banner promocional */
.sec-banner { background: var(--acento); color: #fff; text-align: center; padding: 22px 20px; font-weight: 800; font-size: clamp(15px, 2.6vw, 19px); }

/* Barra de urgencia en la página de producto */
.urgencia { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fef2f2; border: 1.5px dashed var(--peligro); color: #991b1b; border-radius: 11px; padding: 12px 14px; font-weight: 700; font-size: 14px; margin-bottom: 14px; text-align: center; flex-wrap: wrap; }
.urgencia .reloj { background: var(--peligro); color: #fff; border-radius: 8px; padding: 4px 10px; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Beneficios ✓ del producto */
.check-lista { list-style: none; padding: 0; margin: 14px 0 4px; }
.check-lista li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--tinta2); padding: 5px 0; }
.check-lista li::before { content: '✓'; color: var(--exito); font-weight: 800; }

/* Secciones extra bajo el producto */
.prod-extra { max-width: 760px; margin: 0 auto; padding: 10px 20px 60px; }
.prod-extra h2 { text-align: center; font-size: clamp(20px, 3vw, 26px); letter-spacing: -.02em; margin: 34px 0 20px; }

/* ==========================================================
   EDITOR DE DISEÑO (panel)
   ========================================================== */
.diseno-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1100px) { .diseno-layout { grid-template-columns: 440px 1fr; } }
.lista-secciones { display: flex; flex-direction: column; gap: 10px; }
.fila-seccion { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; box-shadow: var(--sombra); }
.fila-seccion.apagada { opacity: .5; }
.fila-seccion.vy-sel { border-color: var(--primario); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 32%, transparent); }
.btn.con-cambios { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 30%, transparent); }
.fila-seccion .icono { font-size: 20px; }
.fila-seccion .info { flex: 1; min-width: 0; }
.fila-seccion .titulo { font-weight: 700; font-size: 14px; }
.fila-seccion .detalle { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-seccion .botones { display: flex; gap: 5px; }
.btn-mini { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linea); background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; transition: .15s; padding: 0; }
.btn-mini:hover { border-color: var(--primario); color: var(--primario); }
.previa { border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); background: #fff; position: sticky; top: 20px; }
.previa .barra { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--linea); background: #f8fafc; font-size: 12.5px; color: var(--gris); }
.previa .punto { width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; }
.previa iframe { width: 100%; height: 72vh; border: none; display: block; }

/* ---- Editor de Apariencia / Tema (dentro de Diseño) ---- */
.apariencia-caja { margin-bottom: 16px; padding: 0; overflow: hidden; }
.apariencia-caja > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 16px 18px; user-select: none; }
.apariencia-caja > summary::-webkit-details-marker { display: none; }
.apariencia-caja > summary::after { content: '▾'; margin-left: auto; color: var(--gris); transition: transform .2s; }
.apariencia-caja[open] > summary::after { transform: rotate(180deg); }
.apariencia-caja .ap-titulo { font-weight: 800; font-size: 15px; }
.apariencia-caja .ap-hint { font-size: 12px; color: var(--gris); }
.ap-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 18px 2px; }
.ap-preset-lbl { font-size: 12.5px; color: var(--gris); width: 100%; margin-bottom: 2px; }
.chip-preset { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linea); background: #fff; border-radius: 20px; padding: 6px 12px 6px 10px; font: 600 12.5px/1 'Inter'; cursor: pointer; transition: .15s; }
.chip-preset::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--c, #888); }
.chip-preset:hover { border-color: var(--c, var(--primario)); transform: translateY(-1px); }
.ap-form { padding: 8px 18px 18px; }
.ap-grupo { margin-bottom: 16px; }
.ap-grupo h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin: 0 0 10px; }
.ap-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.ap-color { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; }
.ap-color input[type="color"] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; cursor: pointer; background: #fff; }
.ap-color small { font-weight: 400; color: var(--gris); font-size: 10.5px; }
.ap-color .hexval { font-weight: 700; color: var(--tinta2); font-size: 10px; letter-spacing: .02em; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* Muestra de tipografía en vivo */
.fuente-muestra { margin-top: 12px; border: 1px dashed var(--linea); border-radius: 12px; padding: 14px 16px; background: #fff; }
.fuente-muestra .fm-tit { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.fuente-muestra .fm-txt { font-size: 14px; color: var(--gris); margin-top: 4px; }

/* Cabecera de la lista de secciones + ayuda de arrastre */
.secciones-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.secciones-cab h3 { font-size: 15px; }
.ayuda-inline { font-size: 12px; color: var(--gris); }
.asa-demo, .fila-seccion .asa { color: #94a3b8; font-size: 16px; }

/* Manija de arrastre + estados de drag&drop */
.fila-seccion { cursor: default; }
.fila-seccion .asa { cursor: grab; padding: 0 2px; line-height: 1; touch-action: none; }
.fila-seccion .asa:active { cursor: grabbing; }
.fila-seccion .info { cursor: pointer; }
.fila-seccion.arrastrando { opacity: .6; border-color: var(--primario); box-shadow: 0 8px 24px rgba(79,70,229,.22); }
.lista-secciones .fila-seccion { transition: box-shadow .15s, border-color .15s, transform .12s; }

/* Selector visual de secciones (agregar) */
.picker-secciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.picker-secciones form { margin: 0; display: block; }
.tipo-card { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; border: 1px solid var(--linea); background: #fff; border-radius: 12px; padding: 12px 12px 13px; cursor: pointer; transition: .15s; }
.tipo-card:hover { border-color: var(--primario); box-shadow: 0 6px 18px rgba(79,70,229,.14); transform: translateY(-2px); }
.tipo-card .tc-ico { font-size: 22px; }
.tipo-card .tc-nombre { font-weight: 700; font-size: 13.5px; }
.tipo-card .tc-desc { font-size: 11px; color: var(--gris); line-height: 1.35; }

/* Controles de la vista previa */
.previa .barra { flex-wrap: wrap; }
.previa .previa-tit { font-weight: 600; }
.previa-ctrl { margin-left: auto; display: flex; gap: 6px; }
.pv-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linea); background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; text-decoration: none; color: inherit; transition: .15s; padding: 0; }
.pv-btn:hover { border-color: var(--primario); }
.pv-btn[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: #fff; }
.previa-lienzo { background: #eef2f7; display: flex; justify-content: center; }
.previa-lienzo iframe { width: 100%; height: 72vh; border: none; display: block; transition: width .25s ease; }
.previa-lienzo.movil { padding: 16px 0; }
.previa-lienzo.movil iframe { width: 390px; max-width: 100%; height: 68vh; border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); background: #fff; }

/* Botón flotante de vista previa (solo celular) */
.pv-flotante { display: none; position: fixed; right: 16px; bottom: 76px; z-index: 45; background: var(--primario); color: #fff; border: none; border-radius: 999px; padding: 12px 18px; font: 700 13px/1 'Inter'; box-shadow: 0 8px 22px rgba(79,70,229,.4); cursor: pointer; }

@media (max-width: 1099px) {
  .previa { position: static; }
  .solo-movil { display: inline; }
  .pv-flotante { display: inline-flex; align-items: center; gap: 6px; }
}
@media (min-width: 1100px) {
  .solo-movil { display: none; }
}

/* ==========================================================
   NAVEGACIÓN TIPO APP (barra inferior en el celular)
   ========================================================== */
.tabs-movil { display: none; }
.hoja-mas, .hoja-fondo { display: none; }
@media (max-width: 860px) {
  .panel-lateral.con-tabs .panel-menu { display: none; }
  .tabs-movil {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 85;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(15, 23, 42, .07);
  }
  .tabs-movil a, .tabs-movil button {
    flex: 1; min-width: 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: 600 10.5px/1.2 'Inter'; color: var(--gris); background: none; border: none;
    padding: 2px 0; cursor: pointer; border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .tabs-movil .t-ico {
    display: flex; align-items: center; justify-content: center; width: 46px; height: 27px;
    border-radius: 999px; transition: background .16s;
  }
  .tabs-movil .t-ico svg { width: 20px; height: 20px; }
  .tabs-movil .activo { color: var(--primario); }
  .tabs-movil .activo .t-ico { background: color-mix(in srgb, var(--primario) 15%, transparent); }
  .tabs-movil button:focus-visible, .tabs-movil a:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
  .panel-main { padding-bottom: 104px; }

  .hoja-fondo {
    display: block; position: fixed; inset: 0; z-index: 83;
    background: rgba(8, 12, 20, .42); backdrop-filter: blur(2px);
  }
  .hoja-fondo[hidden] { display: none; }
  .hoja-mas {
    display: flex; flex-direction: column; position: fixed; left: 8px; right: 8px; z-index: 84;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid var(--linea); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .28); padding: 6px 8px 10px;
    opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98); transition: opacity .2s, transform .2s;
  }
  .hoja-mas.abierta { opacity: 1; pointer-events: auto; transform: none; }
  .hoja-tirador { width: 38px; height: 4px; border-radius: 999px; background: #e2e8f0; margin: 4px auto 6px; flex: none; }
  .hoja-grupo { font: 700 10.5px/1 'Inter'; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); padding: 10px 12px 6px; }
  .hoja-linea { height: 1px; background: var(--linea); margin: 6px 8px; }
  .hoja-mas a {
    display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 12px 12px; border-radius: 12px;
    font: 600 14.5px/1.2 'Inter'; color: var(--tinta); -webkit-tap-highlight-color: transparent;
  }
  .hoja-mas a svg { width: 19px; height: 19px; flex: none; color: var(--gris); }
  .hoja-mas a.activo { background: color-mix(in srgb, var(--primario) 10%, transparent); color: var(--primario); }
  .hoja-mas a.activo svg { color: var(--primario); }
  .hoja-mas a:active, .hoja-mas a:hover { background: var(--fondo); }
  .hoja-mas .menu-salir { color: var(--peligro); }
  .hoja-mas .menu-salir svg { color: var(--peligro); }
  .hoja-mas .menu-ext { margin-left: auto; color: var(--gris); }
  body.sin-scroll { overflow: hidden; }
}

/* Selector de plantilla al crear la tienda */
.plantillas-pick { display: grid; gap: 10px; }
.plantilla-op { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: 'ico nombre' 'ico desc'; gap: 2px 10px; border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: .15s; }
.plantilla-op:hover { border-color: #c7d2fe; }
.plantilla-op:has(input:checked) { border-color: var(--primario); background: #eef2ff; }
.plantilla-op input { display: none; }
.plantilla-op .pl-icono { grid-area: ico; font-size: 24px; align-self: center; }
.plantilla-op .pl-nombre { grid-area: nombre; font: 700 14px/1.3 'Inter'; }
.plantilla-op .pl-desc { grid-area: desc; font: 400 12px/1.45 'Inter'; color: var(--gris); }

/* Administrador de fotos del producto */
.fotos-admin { display: flex; gap: 10px; flex-wrap: wrap; }
.foto-item { position: relative; width: 108px; border: 1px solid var(--linea); border-radius: 10px; padding: 6px; background: #fff; }
.foto-item img { width: 94px; height: 94px; object-fit: cover; border-radius: 7px; display: block; }
.foto-item .foto-num { display: block; font: 700 10.5px/1 'Inter'; color: var(--primario); text-align: center; margin: 6px 0 4px; }
.foto-item .foto-botones { display: flex; gap: 4px; justify-content: center; }
.foto-item .btn-mini { width: 28px; height: 26px; font-size: 12px; }

/* Aviso flotante de nuevo pedido (con el cha-ching) */
.aviso-pedido { position: fixed; top: 18px; right: 18px; z-index: 90; background: #0f172a; color: #fff; padding: 14px 20px; border-radius: 12px; font: 500 14px/1.4 'Inter'; box-shadow: 0 14px 40px rgba(15, 23, 42, .35); cursor: pointer; animation: aviso-entra .35s ease; border-left: 4px solid #4ade80; }
.aviso-pedido.irse { opacity: 0; transform: translateY(-8px); transition: .5s; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   EN VIVO (Live View)
   ========================================================== */
.ev-badge { display: inline-flex; align-items: center; gap: 8px; background: #0f172a; color: #4ade80; font: 700 12px/1 'Inter'; letter-spacing: .07em; padding: 10px 16px; border-radius: 999px; }
.ev-punto { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; animation: evpulso 1.6s ease infinite; }
@keyframes evpulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.ev-fondo { background: linear-gradient(160deg, #0f172a, #1e1b4b 130%); border-radius: var(--radio); padding: 26px; color: #e2e8f0; box-shadow: var(--sombra); }
.ev-activos { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.ev-numero { font: 800 64px/1 'Inter'; color: #4ade80; letter-spacing: -.03em; }
.ev-etiqueta { font-size: 14px; color: #cbd5e1; line-height: 1.5; }
.ev-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ev-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); border-radius: 12px; padding: 14px 16px; }
.ev-card .v { font: 800 23px/1.1 'Inter'; letter-spacing: -.02em; }
.ev-card .n { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.ev-seccion { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.ev-seccion h3 { font-size: 13.5px; margin: 0 0 14px; color: #e2e8f0; }
.ev-seccion h3 span { color: #64748b; font-weight: 400; }
.ev-mini { display: flex; gap: 3px; align-items: flex-end; height: 58px; }
.ev-mini .ev-b { flex: 1; background: #4ade80; border-radius: 3px 3px 0 0; min-height: 3px; transition: height .5s; }
.ev-horas { display: flex; gap: 4px; align-items: flex-end; height: 112px; }
.ev-hcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.ev-hbarras { display: flex; gap: 1.5px; align-items: flex-end; height: 88px; }
.ev-hbarras .ev-b { flex: 1; background: #818cf8; border-radius: 2.5px 2.5px 0 0; min-height: 2px; transition: height .5s; }
.ev-hbarras .ev-b.pedido { background: #4ade80; }
.ev-hcol > span { font-size: 9px; color: #64748b; text-align: center; height: 12px; margin-top: 5px; }
.ev-feed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .ev-feed-grid { grid-template-columns: 1fr; } .ev-numero { font-size: 48px; } }
.ev-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .09); font-size: 13px; }
.ev-item:last-child { border-bottom: none; }
.ev-item b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-item span { color: #94a3b8; white-space: nowrap; font-size: 12px; }
.ev-vacio { color: #64748b; font-size: 13px; margin: 0; }

/* Gráfico del panel (visitas y pedidos) */
.grafico { display: flex; gap: 5px; align-items: flex-end; height: 150px; }
.g-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.g-barras { display: flex; gap: 2px; align-items: flex-end; height: 124px; }
.g-barras .g-barra { flex: 1; background: #c7d2fe; border-radius: 4px 4px 0 0; transition: .2s; }
.g-barras .g-barra.pedidos { background: var(--primario); }
.g-col:hover .g-barra { filter: brightness(.85); }
.g-dia { font-size: 10px; color: var(--gris); text-align: center; margin-top: 6px; }
.leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr !important; } }

/* Filas repetibles del editor */
.item-editor { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #f8fafc; position: relative; }
.item-editor .quitar { position: absolute; top: 10px; right: 10px; }

/* ==========================================================
   LOGO DE LA PLATAFORMA
   ========================================================== */
.logo-v { display: inline-flex; align-items: center; gap: 10px; }
.logo-texto { font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.04em; color: var(--tinta); font-size: calc(var(--alto, 34px) * .68); line-height: 1; }
.logo-texto em { font-style: normal; background: linear-gradient(120deg, #6366f1, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.logo-texto.claro { color: #fff; }

/* Tipografía de marca en los titulares de la plataforma */
.portada-hero h1, .resenas h2, .comparacion h2, .planes-sec h2, .cta-final h2,
.paso h3, .plan h3, .stat .valor { font-family: 'Sora', 'Inter', sans-serif; }

/* ==========================================================
   PORTADA DE LA PLATAFORMA — aliados, reseñas, comparación
   ========================================================== */
.hero-chip { display: inline-flex; align-items: center; gap: 8px; background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; font: 600 13px/1 'Inter'; padding: 9px 16px; border-radius: 999px; margin-bottom: 22px; }

/* Vida de fondo: manchas de color flotando detrás del héroe */
.portada-hero { position: relative; z-index: 0; }
.portada-hero::before, .portada-hero::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none; }
.portada-hero::before { width: 380px; height: 380px; left: -120px; top: -40px; background: radial-gradient(circle, rgba(99, 102, 241, .38), transparent 70%); animation: flotar 9s ease-in-out infinite alternate; }
.portada-hero::after { width: 420px; height: 420px; right: -140px; top: 120px; background: radial-gradient(circle, rgba(236, 72, 153, .30), transparent 70%); animation: flotar 11s ease-in-out infinite alternate-reverse; }
@keyframes flotar { from { transform: translateY(0) scale(1); } to { transform: translateY(26px) scale(1.08); } }
.portada-hero h1 em { background: linear-gradient(120deg, #6366f1, #a855f7 55%, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Cinta infinita (se reutiliza para logos y reseñas) */
.cinta { overflow: hidden; position: relative; }
.cinta::before, .cinta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none; }
.cinta::before { left: 0; background: linear-gradient(90deg, var(--fondo), transparent); }
.cinta::after { right: 0; background: linear-gradient(-90deg, var(--fondo), transparent); }
.cinta-track { display: flex; align-items: stretch; gap: 18px; width: max-content; animation: cinta 26s linear infinite; }
.cinta-track.lenta { animation-duration: 45s; }
.cinta-track.reversa { animation-direction: reverse; }
.cinta:hover .cinta-track { animation-play-state: paused; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Aliados */
.aliados { padding: 10px 0 44px; }
.aliados-titulo { text-align: center; font: 700 13px/1.4 'Inter'; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin: 0 0 20px; }
.chip-logo { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 22px; white-space: nowrap; box-shadow: var(--sombra); }
.chip-logo .mini { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 800 15px/1 'Inter'; flex: 0 0 28px; }
.chip-logo .mini-img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; flex: 0 0 28px; }
.chip-logo .mini.palabra { font-size: 8.5px; font-style: italic; letter-spacing: -.02em; }
.chip-logo .mini.cursiva { font-style: italic; }
.chip-logo .nombre-marca { font: 800 16px/1 'Inter'; letter-spacing: -.01em; }

/* Planes y precios */
.planes-sec { padding: 60px 20px; }
.planes-sec h2 { text-align: center; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; margin: 0 0 8px; }
.planes-sub { text-align: center; color: var(--gris); font-size: 14.5px; margin: 0 0 22px; }
.toggle-pago { display: flex; justify-content: center; width: max-content; margin: 0 auto 34px; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; background: #fff; box-shadow: var(--sombra); }
.toggle-pago button { padding: 11px 22px; border: none; background: transparent; font: 700 13.5px/1 'Inter'; color: var(--tinta2); cursor: pointer; transition: .18s; }
.toggle-pago button.activo { background: var(--tinta); color: #fff; }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 30px 26px 26px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.plan h3 { font-size: 19px; margin: 0 0 4px; }
.plan-desc { font-size: 13.5px; color: var(--gris); margin: 0 0 16px; min-height: 38px; }
.plan .precio { font: 800 44px/1 'Inter'; letter-spacing: -.03em; }
.plan .precio .periodo { font: 600 15px/1 'Inter'; color: var(--gris); letter-spacing: 0; }
.plan .nota-anual { font-size: 12.5px; color: var(--exito); font-weight: 600; margin: 6px 0 4px; min-height: 18px; }
.plan-lista { list-style: none; padding: 0; margin: 14px 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-lista li { display: flex; gap: 9px; font-size: 14px; color: var(--tinta2); align-items: baseline; }
.plan-lista li::before { content: '✓'; color: var(--exito); font-weight: 800; flex: 0 0 auto; }
.plan.destacado { border: 2px solid var(--primario); box-shadow: 0 12px 34px rgba(79, 70, 229, .18); }
@media (min-width: 940px) { .plan.destacado { transform: scale(1.04); z-index: 1; } }
.plan-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--primario); color: #fff; font: 800 11px/1 'Inter'; letter-spacing: .08em; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.plan.mentoria { background: linear-gradient(160deg, #f5f3ff, #fff 55%); border-color: #ddd6fe; }

/* Reseñas en movimiento */
.resenas { padding: 54px 0 60px; background: #fff; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.resenas .cinta::before { background: linear-gradient(90deg, #fff, transparent); }
.resenas .cinta::after { background: linear-gradient(-90deg, #fff, transparent); }
.resenas h2 { text-align: center; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; margin: 0 0 8px; }
.resenas-sub { text-align: center; color: var(--gris); font-size: 14px; margin: 0 0 30px; padding: 0 20px; }
.t-card { width: 320px; flex: 0 0 320px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 9px; }
.t-card .estrellas { color: #f59e0b; letter-spacing: 2px; font-size: 15px; }
.t-card .t-titular { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; }
.t-card .t-texto { font-size: 13.5px; color: var(--tinta2); line-height: 1.55; }
.t-card .quien { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.t-card .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(120deg, #6366f1, #8b5cf6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.t-card .nombre { font-weight: 700; font-size: 13.5px; }
.t-card .t-lugar { font-size: 12px; color: var(--gris); }
@media (max-width: 480px) { .t-card { width: 270px; flex-basis: 270px; } }

/* Tabla de comparación */
.comparacion { padding: 60px 20px; }
.comparacion h2 { text-align: center; font-size: clamp(24px, 4vw, 34px); letter-spacing: -.02em; margin: 0 0 28px; }
.tabla-comp td, .tabla-comp th { text-align: center; }
.tabla-comp td:first-child, .tabla-comp th:first-child { text-align: left; font-weight: 600; }
.tabla-comp .col-vy { background: #eef2ff; font-weight: 700; }
.tabla-comp thead .col-vy { background: #eef2ff; }

/* CTA final */
.cta-final { text-align: center; padding: 64px 24px; background: linear-gradient(120deg, #4f46e5, #7c3aed); color: #fff; }
.cta-final h2 { font-size: clamp(24px, 4.4vw, 36px); letter-spacing: -.02em; margin: 0 0 10px; }
.cta-final p { opacity: .92; margin: 0 0 26px; }


/* ===== Panel: gestión de reseñas por producto ===== */
.res-ancho { max-width: 760px; }
.res-intro { color: var(--gris); font-size: 14px; margin: -6px 0 16px; max-width: 760px; }
.res-resumen { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 12px 30px; align-items: center; }
.rr-prom { text-align: center; }
.rr-num { font: 800 38px/1 'Inter'; color: var(--tinta); }
.rr-prom .estrellas-bar { margin: 7px 0 5px; }
.rr-n, .rr-foto { font-size: 12.5px; color: var(--gris); }
.rr-barras { display: flex; flex-direction: column; gap: 5px; }
.rr-barra { display: grid; grid-template-columns: 40px 1fr 40px 26px; align-items: center; gap: 10px; }
.rrb-lbl { font: 700 12.5px/1 'Inter'; color: var(--tinta); }
.rrb-star { color: #f5b301; }
.rrb-track { height: 8px; border-radius: 999px; background: #e8edf3; overflow: hidden; }
.rrb-fill { display: block; height: 100%; background: #f5b301; border-radius: 999px; }
.rrb-pct, .rrb-n { font-size: 12px; color: var(--gris); text-align: right; }
@media (max-width: 640px) { .res-resumen { grid-template-columns: 1fr; } }

.res-sum { cursor: pointer; font-weight: 800; font-size: 15px; }
.res-titulo-lista { max-width: 760px; margin: 24px 0 10px; font-size: 15px; }  /* alineado con las tarjetas, que van a la izquierda */
.res-vacio { text-align: center; color: var(--gris); padding: 28px; }
.res-vacio b { display: block; color: var(--tinta); margin: 6px 0 4px; font-size: 15px; }
.res-vacio p { font-size: 13.5px; margin: 0; }

.res-item { margin-bottom: 14px; }
.res-item.apagada { opacity: .62; }
.res-item-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); }
.res-orden { font: 800 12px/1 'Inter'; color: var(--gris); background: var(--fondo2, #f1f5f9); border-radius: 6px; padding: 5px 7px; }
.res-item-autor { font-weight: 700; font-size: 14px; }
.res-oculta { font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 4px 9px; }
.res-mover { margin-left: auto; display: flex; gap: 6px; }
.res-mover .btn[disabled] { opacity: .35; cursor: not-allowed; }
.res-item-acciones { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.res-eliminar { color: var(--peligro); margin-left: auto; }
.req { color: var(--peligro); }

/* Selector visual de estrellas (5→1 en el HTML, se muestra al revés) */
.estrellas-pick { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 2px; padding: 6px 0; }
.estrellas-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrellas-pick label { font-size: 26px; line-height: 1; color: #dbe2ea; cursor: pointer; transition: color .1s, transform .1s; margin: 0; }
.estrellas-pick label:hover, .estrellas-pick label:hover ~ label,
.estrellas-pick input:checked ~ label { color: #f5b301; }
.estrellas-pick label:hover { transform: scale(1.12); }
.estrellas-pick input:focus-visible + label { outline: 2px solid var(--acento, #4f46e5); border-radius: 4px; }
/* En un flex row-reverse, el order más bajo se coloca primero, o sea a la DERECHA:
   así quedan las estrellas de 1 a 5 y el "3 de 5" al final. */
.ep-txt { order: -1; margin-left: 10px; font-size: 12.5px; color: var(--gris); }

/* Foto de la reseña: vista previa antes de guardar */
.foto-res { margin-top: 2px; }
.fr-zona { display: flex; align-items: center; justify-content: center; min-height: 96px; border: 2px dashed var(--linea); border-radius: 12px;
  cursor: pointer; overflow: hidden; background: var(--fondo2, #f8fafc); transition: border-color .12s, background .12s; padding: 10px; }
.fr-zona:hover { border-color: var(--acento, #4f46e5); background: color-mix(in srgb, var(--acento, #4f46e5) 4%, #fff); }
.fr-vacio { text-align: center; font-size: 13px; color: var(--gris); }
.fr-vacio b { display: block; color: var(--tinta); margin: 4px 0 2px; }
.fr-vacio .ayuda { display: block; }
.fr-previa { max-width: 100%; max-height: 190px; border-radius: 8px; display: block; }
.fr-pie { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--gris); }
.fr-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fr-quitar-nueva { background: none; border: none; color: var(--peligro); font: 600 12px/1 'Inter'; cursor: pointer; text-decoration: underline; }
.fr-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 9px; padding: 9px 11px; font-size: 12.5px; margin: 8px 0 0; }
.fr-actual { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fr-actual img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); }
.fr-actual label { font-weight: 400; font-size: 12px; display: flex; align-items: center; gap: 6px; margin: 0; }
.fr-actual input { width: auto; }

/* Interruptores de "verificado" y "visible" */
.resena-switches { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0 4px; }
.interruptor { display: inline-flex; align-items: center; gap: 9px; font-weight: 400; font-size: 13.5px; cursor: pointer; margin: 0; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.int-pista { width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex: none; }
.int-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.interruptor input:checked + .int-pista { background: #16a34a; }
.interruptor input:checked + .int-pista::after { transform: translateX(16px); }
.interruptor input:focus-visible + .int-pista { outline: 2px solid var(--acento, #4f46e5); outline-offset: 2px; }

/* Panel de reseñas: pendientes de aprobación y widget */
.res-pendientes { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.res-pendiente { font-size: 11px; font-weight: 700; color: #92400e; background: #fef3c7; border-radius: 999px; padding: 4px 9px; }
.res-origen { font-size: 11px; color: var(--gris); background: var(--fondo2, #f1f5f9); border-radius: 999px; padding: 4px 9px; }
.res-por-aprobar { border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(252,211,77,.16); opacity: 1; }
.res-por-aprobar.apagada { opacity: 1; }
.btn-aprobar { background: #16a34a; color: #fff; border: 1px solid #16a34a; }
.btn-aprobar:hover { background: #15803d; }
.res-widget input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; cursor: pointer; }
/* Un interruptor dentro de un .campo debe seguir siendo un interruptor:
   ".campo label" es display:block y gana por especificidad a ".interruptor". */
.campo label.interruptor { display: inline-flex; align-items: center; gap: 9px; font-weight: 400; font-size: 13.5px; color: var(--tinta); margin: 0 0 9px; }
/* El atributo hidden debe ganar: una regla de autor con display: gana a la del navegador. */
.fr-previa[hidden] { display: none; }
.fr-pie[hidden] { display: none; }

/* ===== Panel · Reseñas: interruptor maestro y lista de productos ===== */
.maestro { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border: 1px solid var(--linea); border-left: 5px solid #cbd5e1; transition: border-color .18s; }
.maestro.encendido { border-left-color: #16a34a; }
.maestro-texto { flex: 1; min-width: 240px; }
.maestro-texto h2 { font: 800 18px/1.25 'Inter'; margin: 0 0 6px; letter-spacing: -.01em; }
.maestro-texto p { font-size: 13.5px; line-height: 1.55; color: var(--gris); margin: 0; }
.maestro-accion { display: flex; align-items: center; gap: 14px; }
.maestro-estado { font: 700 12px/1 'Inter'; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.maestro.encendido .maestro-estado { color: #16a34a; }
/* El interruptor ES el botón: un clic y listo, sin JavaScript */
.int-grande { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.int-grande .int-pista { display: block; width: 62px; height: 34px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .18s; }
.int-grande .int-pista::after { content: ''; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.3); transition: transform .18s; }
.maestro.encendido .int-grande .int-pista { background: #16a34a; }
.maestro.encendido .int-grande .int-pista::after { transform: translateX(28px); }
.int-grande:focus-visible .int-pista { outline: 2px solid var(--acento, #4f46e5); outline-offset: 3px; }
@media (max-width: 560px) {
  .maestro { flex-direction: column; align-items: flex-start; gap: 16px; }
  .maestro-accion { width: 100%; justify-content: space-between; }
}

.res-apagadas { background: #f1f5f9; color: var(--tinta2); border: 1px solid var(--linea); }
.res-apagadas a { color: var(--primario); font-weight: 700; }

/* Un producto de la lista */
.res-prod { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
.res-prod:hover { border-color: var(--primario); transform: translateY(-1px); }
.rp-foto { flex: none; width: 54px; height: 54px; border-radius: 10px; background: #f1f5f9 center/cover no-repeat; border: 1px solid var(--linea); }
.rp-foto.chica { width: 34px; height: 34px; border-radius: 8px; }
.rp-datos { flex: 1; min-width: 0; display: block; }
.rp-datos b { display: block; font-size: 14.5px; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris); }
.rp-btn { flex: none; }
.rp-otros { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.rp-otros a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; color: var(--tinta); }
.rp-otros a:hover { background: var(--fondo); }
@media (max-width: 560px) {
  .res-prod { flex-wrap: wrap; }
  .rp-btn { width: 100%; text-align: center; }
}

/* ===== Panel · Hub de reseñas (gestionar todo de un vistazo + apariencia) ===== */
/* El atributo hidden debe ganar a las reglas de display de estas clases. */
.rp-barras[hidden], .resenas-fotos[hidden], .rev-escribir[hidden],
.rt-fila[hidden], .rev-tabla[hidden], .rev-alta[hidden] { display: none; }

/* Pestañas */
.rev-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin: 22px 0 18px; overflow-x: auto; scrollbar-width: none; }
.rev-tabs::-webkit-scrollbar { display: none; }
.rev-tabs a { flex: none; padding: 12px 16px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 700 14px/1 'Inter'; color: var(--gris); white-space: nowrap; text-decoration: none; }
.rev-tabs a:hover { color: var(--tinta); }
.rev-tabs a.activa { color: var(--primario); border-bottom-color: var(--primario); }
.rev-tabs b { font-weight: 700; opacity: .6; margin-left: 4px; }

/* Cifras de un vistazo */
.rev-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.rev-resumen div { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.rev-resumen b { display: block; font: 800 22px/1 'Inter'; color: var(--tinta); }
.rev-resumen span { font-size: 11.5px; color: var(--gris); }
.rev-resumen .ojo { border-color: #fcd34d; background: #fffbeb; }
.rev-resumen .ojo b { color: #92400e; }
@media (max-width: 560px) { .rev-resumen { grid-template-columns: repeat(2, 1fr); } }

/* Buscador y filtros */
.rev-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.rev-buscar { flex: 1 1 260px; min-height: 42px; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 13px; font: 400 14px/1 'Inter'; }
.rev-barra select { min-height: 42px; min-width: 0; max-width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 9px 10px; font: 600 12.5px/1 'Inter'; background: #fff; color: var(--tinta); cursor: pointer; text-overflow: ellipsis; }
.rev-buscar { min-width: 0; }
.rev-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tinta2); white-space: nowrap; }
.rev-chk input { width: auto; }
.rev-agregar { margin-left: auto; min-height: 42px; }
.rev-cuenta { font-size: 12.5px; color: var(--gris); margin: 0 0 12px; }
.rev-sinres { text-align: center; color: var(--gris); font-size: 14px; padding: 30px 0; }
@media (max-width: 700px) {
  .rev-barra > select, .rev-chk { flex: 1 1 45%; }
  .rev-agregar { flex: 1 1 100%; margin-left: 0; }
}

/* Alta rápida */
.rev-alta { margin-bottom: 14px; }
.rev-alta-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rev-alta-cab b { font-size: 15px; }

/* La tabla: en escritorio es una rejilla; en móvil son tarjetas apiladas */
.rev-tabla { border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff; }
.rt-cab, .rt-fila { display: grid; grid-template-columns: 1.3fr 1fr 2.4fr .9fr .8fr .8fr; gap: 14px; align-items: start; }
.rt-cab { padding: 11px 16px; background: var(--fondo, #f8fafc); border-bottom: 1px solid var(--linea);
  font: 700 11px/1 'Inter'; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.rt-fila { padding: 15px 16px; border-bottom: 1px solid var(--linea); }
.rt-fila:last-of-type { border-bottom: none; }
.rt-fila.apagada { background: #fafbfc; }
.rt-fila.apagada .rt-cont, .rt-fila.apagada .rt-prod { opacity: .62; }
.rt-fila.pendiente { background: #fffbeb; }

.rt-prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rt-prod-nom { font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rt-rev b { display: block; font-size: 13.5px; }
.rt-verif { font-size: 11px; color: #16a34a; font-weight: 600; }
.rt-linea { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rt-fecha { font-size: 11.5px; color: var(--gris); }
.rt-tit { font: 700 13.5px/1.3 'Inter'; margin-bottom: 3px; }
.rt-txt { font-size: 13px; line-height: 1.5; color: var(--tinta2); margin: 0; }
.rt-mini { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); margin-top: 8px; display: block; }
.rt-chip { display: inline-block; font: 700 10.5px/1 'Inter'; letter-spacing: .04em; text-transform: uppercase;
  background: #eef2f7; color: #475569; border-radius: 999px; padding: 5px 8px; }
.rt-chip.cliente { background: #ede9fe; color: #5b21b6; }
.rt-fuente { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.rt-pub { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rt-acc { display: flex; gap: 6px; align-items: center; }
.rt-btn { width: 34px; height: 34px; border: 1px solid var(--linea); background: #fff; border-radius: 9px; cursor: pointer; font-size: 14px; line-height: 1; }
.rt-btn:hover { border-color: var(--primario); }
.rt-btn.peligro:hover { border-color: var(--peligro); color: var(--peligro); }

/* Interruptor "Publicar" dentro de la fila */
.int-fila { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.int-fila .int-pista { display: block; width: 44px; height: 25px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; }
.int-fila .int-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.28); transition: transform .15s; }
.int-fila[aria-checked="true"] .int-pista { background: #16a34a; }
.int-fila[aria-checked="true"] .int-pista::after { transform: translateX(19px); }
.int-fila:focus-visible .int-pista { outline: 2px solid var(--primario); outline-offset: 3px; }

.rt-editar { padding: 16px; background: var(--fondo, #f8fafc); border-bottom: 1px solid var(--linea); }
.rt-editar-acc { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 900px) {
  .rt-cab { display: none; }
  .rev-tabla { border: none; background: none; border-radius: 0; }
  .rt-fila { display: block; border: 1px solid var(--linea); border-radius: 14px; background: #fff; padding: 14px; margin-bottom: 10px; }
  .rt-fila:last-of-type { border-bottom: 1px solid var(--linea); }
  .rt-prod { margin-bottom: 10px; }
  .rt-prod-nom { -webkit-line-clamp: 1; }
  .rt-rev { margin-bottom: 8px; }
  .rt-cont { margin-bottom: 10px; }
  .rt-fuente { flex-direction: row; align-items: center; margin-bottom: 12px; }
  .rt-pub { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
    border-top: 1px solid var(--linea); padding-top: 12px; }
  .rt-pub::before { content: "Publicar"; font: 700 12.5px/1 'Inter'; color: var(--tinta2); order: -1; }
  .rt-acc { margin-top: 10px; justify-content: flex-end; }
  .rt-btn { width: 42px; height: 42px; font-size: 16px; }
  .rt-editar { border: 1px solid var(--linea); border-radius: 14px; margin: -6px 0 12px; }
}

/* ===== Apariencia con vista previa ===== */
.ap-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1000px) { .ap-grid { grid-template-columns: 380px 1fr; align-items: start; } }
.ap-controles input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; cursor: pointer; }
.ap-preview { position: sticky; top: 20px; }
.ap-preview-cab { display: flex; align-items: baseline; gap: 10px; font: 700 12px/1 'Inter'; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: 8px; }
.ap-preview-cab span { font: 400 11.5px/1 'Inter'; letter-spacing: 0; text-transform: none; }
.ap-marco { border: 1px solid var(--linea); border-radius: 16px; background: #fff; padding: 6px 4px 14px; overflow: hidden; }
/* Dentro del marco la sección se comporta como en la tienda, pero sin ocupar 1020px */
.ap-marco .sec-resenas { max-width: none; padding: 6px 14px 10px; }
.ap-marco .resenas-cab { border-top: none; padding-top: 6px; }
.ap-marco .rev-escribir { pointer-events: none; }
.ap-marco .rf-item, .ap-marco .resena-foto { cursor: default; }
.ap-marco .resenas-fotos { margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible; }
.ap-marco .rf-item { flex: none; max-width: none; }
.ap-marco .resenas-masonry { grid-template-columns: 1fr; }
.ap-marco .resenas-panel.solo-prom { display: block; }
/* Dentro del marco, ".ap-marco .resenas-fotos" empata en especificidad con la guarda
   general y va después: hace falta una guarda igual de específica. */
.ap-marco .resenas-fotos[hidden], .ap-marco .rp-barras[hidden], .ap-marco .rev-escribir[hidden] { display: none; }

/* ===== Panel · Botón de WhatsApp (atención al cliente) ===== */
/* Aquí el interruptor maestro es un checkbox: funciona aunque no cargue el JavaScript. */
.int-grande input { position: absolute; opacity: 0; width: 0; height: 0; }
.int-grande input:checked + .int-pista { background: #16a34a; }
.int-grande input:checked + .int-pista::after { transform: translateX(28px); }
.int-grande input:focus-visible + .int-pista { outline: 2px solid var(--acento, #4f46e5); outline-offset: 3px; }
.btn[hidden] { display: none; }

.wa-cfg[hidden] { display: none; }
.wa-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 1000px) { .wa-grid { grid-template-columns: 1fr 1fr; } }
.wa-tit { font: 800 15px/1.2 'Inter'; margin: 0 0 12px; }
.wa-cab-perfiles { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wa-perfil { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--fondo, #f8fafc); }
.wa-quitar { background: none; border: none; color: var(--peligro); font: 600 12.5px/1 'Inter'; cursor: pointer; text-decoration: underline; padding: 0; }
.wa-quitar[hidden] { display: none; }
.wa-aviso { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; margin-bottom: 12px; }
.interruptor.apagada { opacity: .5; }
#waRotAyuda { margin-top: 6px; }

/* Vista previa: la burbuja tal cual sale en la tienda */
.wa-previa { margin-top: 18px; }
.wa-marco { position: relative; min-height: 340px; border: 1px solid var(--linea); border-radius: 16px;
  background: linear-gradient(180deg, #f8fafc, #eef2f7); padding: 16px;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 12px; overflow: hidden; }
.wa-marco.wa-izq { align-items: flex-start; }
.wa-caja-previa { width: min(320px, 100%); background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .18); border: 1px solid rgba(15,23,42,.06); }
.wa-caja-previa[hidden] { display: none; }
.wa-marco .vc-wa-agente { cursor: default; }
#waNota { margin-top: 8px; }

/* ===== Popup de ventas / prueba social =====
   Prefijo vc- a propósito: los bloqueadores esconden clases con "ad"/"ads"/"ad-".
   Va por DEBAJO de la burbuja de WhatsApp (z 70) y por encima de la barra de compra (z 50). */
.vc-pop { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 65; display: flex; align-items: flex-start; gap: 6px;
  width: min(340px, calc(100vw - 32px));
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.vc-pop[hidden] { display: none; }
.vc-pop.vc-pop-visible { opacity: 1; transform: none; }
.vc-pop-der { left: auto; right: 16px; }
@media (prefers-reduced-motion: reduce) { .vc-pop { transition: opacity .2s; transform: none; } }

/* --- Que no choque con nada ---
   Móvil: la barra fija de compra ocupa el borde inferior en la ficha de producto. */
@media (max-width: 879px) {
  .vc-pop-sube { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* Con la burbuja de WhatsApp en pantalla no caben lado a lado (56px + 340px > 390px):
     el aviso se coloca SIEMPRE por encima de ella, esté en la esquina que esté. */
  .vc-pop-wa { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .vc-pop-wa.vc-pop-sube { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
}
/* Escritorio: solo estorba si comparten esquina. */
@media (min-width: 880px) {
  .vc-pop-mismo-lado { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

.vc-pop-tarjeta { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid rgba(15,23,42,.08); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .18); text-decoration: none; color: #0f172a; }
.vc-pop-tarjeta:hover { box-shadow: 0 14px 38px rgba(15, 23, 42, .24); }
.vc-pop-img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f1f5f9; }
.vc-pop-img[hidden] { display: none; }
.vc-pop-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vc-pop-linea { font: 400 13px/1.35 'Inter'; color: #334155;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vc-pop-linea b { font-weight: 700; color: var(--vc-pop-acento, var(--acento, #0f172a)); }
.vc-pop-meta { font: 600 11px/1 'Inter'; color: #94a3b8; }
.vc-pop-meta[hidden] { display: none; }
.vc-pop-x { flex: none; width: 24px; height: 24px; border: none; border-radius: 50%;
  background: #e2e8f0; color: #475569; font-size: 11px; line-height: 1; cursor: pointer; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; }
.vc-pop-x:hover { background: #cbd5e1; }
.vc-pop-x:focus-visible { outline: 2px solid var(--vc-pop-acento, var(--acento, #4f46e5)); outline-offset: 2px; }

/* ===== Panel · Popup de ventas ===== */
.pop-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; align-items: start; }
@media (min-width: 1000px) { .pop-grid { grid-template-columns: 1fr 1fr; } }
.pop-cfg[hidden] { display: none; }
.pop-tit { font: 800 15px/1.2 'Inter'; margin: 0 0 12px; }
.pop-fuentes { display: grid; gap: 10px; }
.pop-fuente { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--linea);
  border-radius: 12px; padding: 13px; cursor: pointer; margin: 0; font-weight: 400; }
.pop-fuente:hover { border-color: var(--primario); }
.pop-fuente input { margin-top: 3px; width: auto; flex: none; }
.pop-fuente input:checked ~ .pop-fuente-txt > b { color: var(--primario); }
.pop-fuente:has(input:checked) { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 5%, transparent); }
/* Solo el título es bloque: los <b> de la descripción siguen en línea. */
.pop-fuente-txt > b { display: block; font: 700 14px/1.3 'Inter'; margin-bottom: 3px; }
.pop-fuente-txt span { font-size: 12.5px; color: var(--gris); line-height: 1.45; }
.pop-fuente-txt span b { font-weight: 700; color: var(--tinta); }
.pop-nota { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; border-radius: 10px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin: 12px 0 0; }
.pop-tiempos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .pop-tiempos { grid-template-columns: 1fr; } }
.pop-productos { max-height: 240px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; padding: 6px; margin-top: 8px; }
.pop-productos label { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font-weight: 400; font-size: 13px; margin: 0; }
.pop-productos label:hover { background: var(--fondo); }
.pop-productos input { width: auto; flex: none; }
.pop-productos .rp-foto { width: 30px; height: 30px; border-radius: 6px; }
.pop-cfg input[type=color] { width: 100%; height: 42px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; cursor: pointer; }

/* ===== Panel · Diseñador del formulario ===== */
.df-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 14px;
  position: sticky; top: 0; z-index: 5; background: var(--fondo); padding: 8px 0; }
.df-modos { display: inline-flex; background: #eef1f6; border-radius: 10px; padding: 3px; }
.df-modo { border: 0; background: none; padding: 8px 14px; border-radius: 8px; font: 700 13px/1 'Inter'; color: var(--gris); cursor: pointer; }
.df-modo.activo { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

.df-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
/* Sin min-width:0 un hijo de grid puede desbordar y provocar scroll horizontal. */
.df-grid > * { min-width: 0; }
@media (min-width: 1080px) { .df-grid { grid-template-columns: minmax(0, 1fr) 400px; } .df-previa { position: sticky; top: 70px; } }
.df-grid.df-solo-previa .df-controles { display: none; }
@media (min-width: 1080px) { .df-grid.df-solo-previa { grid-template-columns: 1fr; } .df-grid.df-solo-previa .df-previa { max-width: 460px; margin: 0 auto; } }

.df-panel { background: #fff; border: 1px solid var(--linea); border-radius: 14px; margin-top: 14px; overflow: hidden; }
.df-panel > summary { cursor: pointer; padding: 14px 16px; font: 800 14px/1 'Inter'; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.df-panel > summary::-webkit-details-marker { display: none; }
.df-panel > summary::after { content: '⌄'; font-size: 18px; color: var(--gris); }
.df-panel[open] > summary { border-bottom: 1px solid var(--linea); }
.df-panel[open] > summary::after { content: '⌃'; }
.df-panel-cuerpo { padding: 16px; }

/* Interruptor con título + explicación. Ojo: NO llamarlo .int-fila, ese nombre ya
   lo usa el toggle "Publicar" del hub de reseñas (un <button>, no un <label>). */
.df-int { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; margin: 0; }
.df-int > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; }
.df-int small { color: var(--gris); font-size: 12.5px; line-height: 1.4; }

.df-lista { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; }
.df-elem { border: 1px solid var(--linea); border-radius: 11px; background: #fff; }
.df-elem.df-arrastrando { opacity: .45; }
.df-elem.df-oculto .df-elem-nombre { opacity: .5; text-decoration: line-through; }
.df-elem-top { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 6px; }
.df-arrastre { cursor: grab; color: #b8c0cc; font-size: 15px; padding: 0 4px; letter-spacing: -2px; }
.df-elem-nombre { font-weight: 600; font-size: 13.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-elem-tag { font: 600 10.5px/1 'Inter'; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); background: var(--fondo); border-radius: 5px; padding: 4px 6px; }
.df-elem-acc { display: flex; gap: 4px; }
.df-elem-cuerpo { padding: 4px 14px 14px; border-top: 1px dashed var(--linea); }
.df-elem-cuerpo[hidden] { display: none; }
.df-chks { display: flex; gap: 18px; flex-wrap: wrap; }
.df-img-previa { margin-bottom: 10px; }
.df-img-previa img { max-width: 100%; max-height: 130px; border-radius: 9px; display: block; }
.df-img-previa img[hidden] { display: none; }

.df-agregar { position: relative; }
.df-menu { position: absolute; z-index: 8; top: 100%; left: 0; margin-top: 6px; width: min(320px, 92vw);
  background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
  padding: 8px; max-height: 60vh; overflow-y: auto; }
.df-menu[hidden] { display: none; }
.df-menu-grupo { font: 700 10.5px/1 'Inter'; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); padding: 10px 8px 6px; }
.df-menu-items button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 9px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--tinta); }
.df-menu-items button:hover { background: var(--fondo); }
.df-menu-vacio { padding: 6px 8px 10px; font-size: 12.5px; color: var(--gris); }
.df-plantillas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--gris); }

.df-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 6px; }
.df-color { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; }
.df-color input[type=color] { width: 100%; height: 40px; padding: 3px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; cursor: pointer; }
.df-usar { font-weight: 400 !important; font-size: 11.5px; color: var(--gris); display: flex; align-items: center; gap: 5px; margin: 0; }
.df-usar input { width: auto; }
.df-rangos { display: grid; gap: 12px; margin: 14px 0; }
.df-rangos label { font-size: 12.5px; font-weight: 600; display: block; }
.df-rangos input[type=range] { width: 100%; margin-top: 4px; accent-color: var(--primario); }

/* Precio con descuento en el upsell 1-Click de la página de gracias */
.upsell-antes { text-decoration: line-through; color: var(--gris); font-weight: 400; font-size: .85em; }
.upsell-off { display: inline-block; background: #e9f9ef; color: #0f6b37; font: 700 11px/1 'Inter'; padding: 3px 6px; border-radius: 6px; margin-left: 4px; }

/* ===== Panel · Productos estilo Shopify ===== */
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0 16px; }
.pl-top h1 { margin: 0; }
.pl-top-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-panel { background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.pl-tabs { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--linea); overflow-x: auto; }
.pl-tab { padding: 9px 14px; border-radius: 9px 9px 0 0; font: 600 13.5px/1 'Inter'; color: var(--gris); white-space: nowrap; border-bottom: 2px solid transparent; }
.pl-tab b { font-weight: 700; color: var(--tinta2); margin-left: 3px; }
.pl-tab.activo { color: var(--tinta); border-bottom-color: var(--primario); }
.pl-buscar { display: flex; align-items: center; gap: 8px; margin: 12px 14px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.pl-buscar svg { width: 17px; height: 17px; color: var(--gris); flex: none; }
.pl-buscar input { border: 0; background: none; padding: 11px 0; flex: 1; min-width: 0; font-size: 14px; }
.pl-buscar input:focus { outline: none; }
.pl-limpiar { color: var(--gris); font-size: 13px; padding: 4px; flex: none; }

.pl-vacio { text-align: center; padding: 46px 20px; }
.pl-vacio h2 { font-size: 19px; margin: 8px 0 6px; }
.pl-vacio p { color: var(--gris); }

/* Barra de selección: aparece al marcar el primer producto y acompaña el scroll
   (como en Shopify), para que las acciones estén siempre a mano. */
.pl-seleccion {
  position: sticky; top: 10px; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 14px; padding: 10px 12px 10px 8px;
  background: var(--tinta); border: 1px solid var(--tinta); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  animation: pl-sel-entra .16s ease-out;
}
@keyframes pl-sel-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pl-seleccion[hidden] { display: none; }
.pl-seleccion .pl-sel-n { color: #fff; font: 600 13.5px/1 'Inter'; white-space: nowrap; }
.pl-seleccion .pl-sel-n b { font-weight: 800; }
.pl-sel-x {
  width: 30px; height: 30px; flex: none; border: none; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 13px; line-height: 1;
}
.pl-sel-x:hover { background: rgba(255,255,255,.26); }
.pl-seleccion-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.pl-seleccion-acc .btn-borde { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff; }
.pl-seleccion-acc .btn-borde:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
.pl-del, .pl-seleccion-acc .pl-del { color: #fecaca; }
.pl-seleccion-acc .pl-del:hover { background: var(--peligro); border-color: var(--peligro); color: #fff; }
@media (max-width: 600px) {
  .pl-seleccion { flex-direction: column; align-items: stretch; }
  .pl-seleccion-acc { margin-left: 0; }
  .pl-seleccion-acc .btn { flex: 1 1 auto; justify-content: center; }
  .pl-sel-x { position: absolute; top: 8px; right: 8px; }
}

/* Papelera */
.pl-badge-del { background: #fdecec; color: #b42318; }
.pl-papelera-nota {
  margin: 12px 14px 0; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
}
.pl-restaurar { white-space: nowrap; }
.pl-prod-quieto { cursor: default; }
.pl-prod-quieto .pl-nombre { color: var(--tinta2); }

/* Modal de confirmación al eliminar */
.pl-del-lista { margin: 0 0 12px; padding: 0 0 0 18px; font-size: 13.5px; color: var(--tinta2); line-height: 1.6; max-height: 168px; overflow-y: auto; }
.pl-del-lista .pl-del-mas { list-style: none; margin-left: -18px; color: var(--gris); font-size: 12.5px; }
.pl-del-tip { font-size: 12.5px; color: var(--gris); background: var(--fondo); border-radius: 9px; padding: 10px 12px; margin: 0 0 18px; line-height: 1.5; }
.pl-modal-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
body.pl-sin-scroll { overflow: hidden; }

/* Tabla (desktop) */
.pl-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pl-tabla thead th { text-align: left; font: 700 12px/1 'Inter'; color: var(--gris); text-transform: uppercase; letter-spacing: .03em;
  padding: 10px 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.pl-tabla tbody td { padding: 10px 12px; border-bottom: 1px solid var(--fondo); vertical-align: middle; }
.pl-tabla tbody tr:hover { background: var(--fondo); }
.pl-col-chk { width: 34px; }
.pl-col-acc { width: 40px; text-align: right; }
.pl-tenue { color: var(--gris); }
.pl-mini { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none;
  border-radius: 9px; background: var(--fondo) center/cover no-repeat; border: 1px solid var(--linea); font-size: 20px; }
.pl-prod { display: flex; align-items: center; gap: 12px; color: var(--tinta); }
.pl-prod-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-nombre { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; }
.pl-precio { font-size: 12.5px; color: var(--gris); }
.pl-precio s { opacity: .7; }
.pl-badge { display: inline-block; font: 600 11.5px/1 'Inter'; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.pl-badge-on { background: #e3f1e6; color: #216e39; }
.pl-badge-off { background: #eceef1; color: #5b6675; }
.pl-ver { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--gris); font-size: 15px; }
.pl-ver:hover { background: var(--fondo); color: var(--tinta); }

/* Modal de importar productos por CSV */
.pl-modal { position: fixed; inset: 0; z-index: 120; background: rgba(8,12,20,.6); display: flex; align-items: center; justify-content: center; padding: 18px; }
.pl-modal[hidden] { display: none; }
.pl-modal-caja { position: relative; background: var(--blanco); border-radius: 14px; box-shadow: 0 20px 60px rgba(8,12,20,.35); padding: 26px; width: 100%; max-width: 460px; }
.pl-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: none; background: var(--fondo); border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--gris); }
.pl-modal-x:hover { background: #e5e9ef; color: var(--tinta); }
.pl-modal-caja input[type="file"] { width: 100%; font-size: 13.5px; }

/* Tarjetas (móvil) */
.pl-cards { display: none; }
.pl-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--fondo); margin: 0; cursor: pointer; }
.pl-card > input { flex: none; width: 20px; height: 20px; accent-color: var(--primario); }
.pl-card-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pl-card-meta { display: flex; align-items: center; gap: 10px; }

.pl-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px; border-top: 1px solid var(--linea); font-size: 12.5px; }
.pl-pag { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .pl-tabla { display: none; }
  .pl-cards { display: block; }
}

/* ===== Panel · Editor de producto estilo Shopify ===== */
.pe-top { display: flex; align-items: center; gap: 12px; margin: 16px 0 16px; }
.pe-top h1 { margin: 0; font-size: 22px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-volver { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 9px; color: var(--tinta); font-size: 18px; flex: none; }
.pe-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .pe-grid { grid-template-columns: minmax(0,1fr) 340px; } }
.pe-main, .pe-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pe-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; }
.pe-h2 { font-size: 14.5px; margin: 0 0 12px; }

/* Rich text */
.pe-rt { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; }
.pe-rt-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--fondo); border-bottom: 1px solid var(--linea); }
.pe-rt-barra button { width: 30px; height: 30px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--tinta2); }
.pe-rt-barra button:hover { background: #fff; }
.pe-rt-bloque { height: 30px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; font-size: 12.5px; margin-right: 4px; }
.pe-rt-area { min-height: 150px; max-height: 420px; overflow-y: auto; padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.pe-rt-area:focus { outline: none; }
.pe-rt-area p { margin: 0 0 8px; } .pe-rt-area ul, .pe-rt-area ol { margin: 0 0 8px; padding-left: 22px; }
.pe-rt-area h3 { font-size: 17px; margin: 10px 0 6px; } .pe-rt-area h4 { font-size: 15px; margin: 8px 0 4px; }

/* Multimedia */
.pe-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pe-media-item { position: relative; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: grab; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .16s ease; }
.pe-media-item:active { cursor: grabbing; }
.pe-media-item.pe-media-arrastrando { opacity: .58; transform: scale(.96); box-shadow: 0 12px 28px rgba(15,23,42,.18); }
.pe-media-item.pe-media-destino { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 18%, transparent); }
.pe-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-media-num { position: absolute; top: 5px; left: 5px; background: rgba(15,23,42,.78); color: #fff; font: 700 10px/1 'Inter'; padding: 3px 6px; border-radius: 5px; }
.pe-media-grip { position: absolute; top: 5px; right: 5px; z-index: 2; width: 29px; height: 29px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 8px; color: #0f172a; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(15,23,42,.16); cursor: grab; font-size: 18px; line-height: 1; touch-action: none; }
.pe-media-grip:active { cursor: grabbing; }
.pe-media-btns { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; padding: 4px; background: linear-gradient(transparent, rgba(15,23,42,.5)); }
.pe-media-btns .btn-mini { background: #fff; }
.pe-subir { display: flex; align-items: center; justify-content: center; padding: 14px; border: 1.5px dashed var(--linea); border-radius: 10px; cursor: pointer; color: var(--primario); font-weight: 600; font-size: 13.5px; }
.pe-subir:hover { background: var(--fondo); }

/* Chips */
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pe-chips:empty { display: none; }
.pe-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; }
.pe-chip button { border: 0; background: none; cursor: pointer; color: var(--gris); font-size: 12px; padding: 0 2px; }

/* Variantes del editor de producto */
.pe-var-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pe-var-encabezado .pe-h2 { margin-bottom: 6px; }
.pe-var-encabezado .ayuda { margin: 0; max-width: 570px; }
.pe-opcion { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fff; }
.pe-opcion-top { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: end; gap: 10px; }
.pe-opcion-top .campo { margin: 0; }
.pe-opcion-grip { align-self: center; color: var(--gris); font-size: 19px; }
.peo-quitar { color: var(--peligro); margin-bottom: 10px; }
.peo-label { display: block; margin: 14px 0 5px; font: 700 12px/1 'Inter'; color: var(--tinta2); }
.peo-orden-ayuda { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; color: var(--gris); font-size: 11.5px; }
.peo-orden-ayuda span { color: var(--primario); font-size: 15px; }
.peo-chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 8px; }
.peo-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 4px 5px 4px 7px; background: var(--fondo); font-size: 13px; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.peo-chip.peo-arrastrando { opacity: .42; }
.peo-chip.peo-destino-antes { border-color: var(--primario); box-shadow: inset 3px 0 0 var(--primario); }
.peo-chip.peo-destino-despues { border-color: var(--primario); box-shadow: inset -3px 0 0 var(--primario); }
.peo-chip-grip { flex: 0 0 auto; color: var(--gris); font-size: 16px; line-height: 1; cursor: grab; user-select: none; padding: 5px 1px; border-radius: 4px; }
.peo-chip-grip:active { cursor: grabbing; }
.peo-chip-grip:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.peo-chip-texto { min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.peo-chip-acciones { display: inline-flex; align-items: center; gap: 1px; padding-left: 4px; border-left: 1px solid var(--linea); }
.peo-chip button { display: grid; place-items: center; width: 23px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: var(--gris); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.peo-chip button:hover:not(:disabled), .peo-chip button:focus-visible { background: #fff; color: var(--primario); outline: 1px solid var(--linea); }
.peo-chip button:disabled { opacity: .28; cursor: not-allowed; }
.peo-chip .peo-quitar-valor { color: var(--peligro); font-size: 17px; }
.peo-agregar-fila { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 9px; }
.peo-agregar-fila input { min-width: 0; }
.pe-opcion > .ayuda { margin: 7px 0 0; }
.pe-var-tabla { margin-top: 16px; overflow-x: auto; border: 1px solid var(--linea); border-radius: 12px; }
.pe-var-tabla[hidden] { display: none; }
.pe-var-tabla table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-var-resumen { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linea); background: var(--fondo); font-size: 12px; color: var(--gris); }
.pe-var-resumen b { color: var(--tinta); font-size: 13px; }
.pe-var-tabla th { text-align: left; font: 700 11px/1 'Inter'; text-transform: uppercase; color: var(--gris); padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.pe-var-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--fondo); vertical-align: middle; }
.pe-var-tabla tbody tr:last-child td { border-bottom: 0; }
.pev-ident { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.pev-ident > div { display: grid; gap: 5px; }
.pev-ident strong { font-size: 13.5px; }
.pev-ident select { width: 160px; padding: 5px 7px; font-size: 11.5px; color: var(--tinta2); }
.pev-mini { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--linea); border-radius: 9px; background: var(--fondo); }
.pev-mini img { width: 100%; height: 100%; object-fit: cover; }
.pev-mini-vacia { color: var(--gris); font-size: 20px; }
.pev-moneda { display: flex; align-items: center; width: 145px; border: 1px solid var(--linea); border-radius: 8px; overflow: hidden; background: #fff; }
.pev-moneda span { padding: 0 8px; color: var(--gris); font-size: 12px; }
.pev-moneda .pev-precio { width: 100%; min-width: 80px; border: 0; border-left: 1px solid var(--linea); border-radius: 0; padding: 8px; }
.pev-switch { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pev-switch input { width: 17px; height: 17px; accent-color: var(--primario); }

@media (max-width: 700px) {
  .pe-var-encabezado { flex-direction: column; }
  .pe-opcion-top { grid-template-columns: minmax(0,1fr) auto; }
  .pe-opcion-grip { display: none; }
  .pe-var-resumen span { display: none; }
  .pv-valor { min-height: 42px; padding: 8px 12px; }
}

/* Estado + SEO */
.pe-estado-sel, .pe-side select { width: 100%; }
.pe-seo-card { margin-top: 16px; }
.pe-seo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pe-seo-head .pe-h2 { margin-bottom: 4px; }
.pe-seo-head .ayuda { margin: 0 0 14px; }
.pe-seo-preview { border: 1px solid var(--linea); border-radius: 10px; padding: 14px; margin-bottom: 14px; background: #fff; max-width: 780px; }
.pe-seo-url { font-size: 12px; color: #287a3f; overflow-wrap: anywhere; }
.pe-seo-tit { color: #1a0dab; font-size: 17px; margin: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-seo-desc { font-size: 12.5px; color: var(--tinta2); line-height: 1.45; }
.pe-seo-precio { color: var(--tinta2); font-size: 12px; margin-top: 7px; font-weight: 650; }
.pe-seo-editor { max-width: 780px; border-top: 1px solid var(--linea); padding-top: 16px; }
.pe-seo-editor[hidden] { display: none; }
.pe-campo-contador { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.pe-campo-contador label { margin: 0; }
.pe-campo-contador > span { color: var(--tinta2); font-size: 11.5px; text-align: right; }
.pe-campo-contador > span.pe-contador-pasado { color: var(--peligro); font-weight: 700; }
.pe-link-btn { border: 0; background: transparent; color: var(--primario); padding: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pe-url-editor { display: flex; align-items: stretch; border: 1px solid var(--linea); border-radius: 9px; overflow: hidden; background: #fff; }
.pe-url-editor:focus-within { border-color: var(--primario); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 18%, transparent); }
.pe-url-editor > span { display: flex; flex: 0 0 auto; align-items: center; max-width: 58%; padding: 0 10px; background: var(--fondo); border-right: 1px solid var(--linea); color: var(--tinta2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-url-editor input { flex: 1 1 220px; width: auto; min-width: 150px; border: 0; border-radius: 0; box-shadow: none !important; }
@media (max-width: 620px) {
  .pe-seo-head { align-items: center; }
  .pe-seo-head .ayuda { display: none; }
  .pe-url-editor { flex-direction: column; }
  .pe-url-editor > span { max-width: none; min-height: 36px; border-right: 0; border-bottom: 1px solid var(--linea); }
}

.pe-guardar { display: flex; justify-content: flex-end; gap: 10px; margin: 18px 0 8px; position: sticky; bottom: 0; background: var(--fondo); padding: 12px 0; }
@media (max-width: 879px) { .pe-guardar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* ===== Panel · Impulsor de ventas (upsells & downsells) ===== */
.imp-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; margin-top: 16px; overflow: hidden; }
.imp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 16px; border-bottom: 1px solid var(--linea); }
.imp-head h2 { font-size: 15.5px; margin: 0 0 4px; }
.imp-head p { font-size: 12.5px; color: var(--gris); margin: 0; line-height: 1.5; max-width: 560px; }
.imp-master { flex: none; }
.imp-body { padding: 16px; transition: opacity .15s; }
.imp-body.imp-off { opacity: .45; pointer-events: none; }
.imp-item { border: 1px solid var(--linea); border-radius: 11px; padding: 12px 14px; margin-bottom: 10px; background: var(--fondo); }
.imp-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.imp-item-nom { font-weight: 700; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-item-acc { display: flex; align-items: center; gap: 12px; flex: none; }
.imp-item-acc .interruptor { font-size: 12.5px; }

/* Ranuras de imagen del formulario (encabezado y pie) */
.df-ranura { border: 1px solid var(--linea); border-radius: 12px; margin-top: 14px; overflow: hidden; }
.df-ranura-cab { background: var(--fondo); padding: 11px 13px; border-bottom: 1px solid var(--linea); }
.df-ranura-cab b { display: block; font-size: 13.5px; }
.df-ranura-cab span { display: block; font-size: 12px; color: var(--gris); margin-top: 2px; line-height: 1.4; }
.df-ranura-cuerpo { padding: 13px; }
.df-ranura-img { display: block; width: 100%; max-height: 150px; object-fit: cover; border-radius: 9px; margin-bottom: 10px; }
.df-ranura-img[hidden] { display: none; }
.df-ranura-acc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-subir { cursor: pointer; margin: 0; }
.df-quitar-img { color: var(--peligro); }
.df-quitar-img[hidden] { display: none; }
.df-ranura-alt { width: 100%; margin-top: 10px; }
.df-ranura-msg { margin-top: 6px; }

/* Bloque del botón de pago con tarjeta */
.df-tarjeta-bloque { border: 1px solid var(--linea); border-radius: 12px; padding: 14px; }
.df-tarjeta-bloque.df-sin-pasarela { background: var(--fondo); }
.df-tarjeta-bloque.df-sin-pasarela .campo, .df-tarjeta-bloque.df-sin-pasarela .df-int { opacity: .55; }
.df-tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.df-tarjeta-cab b { font-size: 13.5px; }
.df-pill { font: 700 11px/1 'Inter'; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.df-pill-ok { background: #e9f9ef; color: #0f6b37; border: 1px solid #b7e7c9; }
.df-pill-off { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.df-nota-pasarela { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.df-nota-pasarela a { color: #92400e; font-weight: 700; text-decoration: underline; }

/* Imágenes de las ranuras en el formulario real.
   Un banner es una FRANJA: si el vendedor sube una foto vertical, la recortamos
   en vez de dejar que se trague el formulario entero. */
.cf-img-hdr { margin-bottom: 16px; }
.cf-img-hdr img { width: 100%; height: auto; max-height: 50vh; object-fit: contain; object-position: center; }
.cf-img-pie { margin: 18px 0 0; }
.cf-img-pie img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; object-position: center; }

/* Teléfono de mentira que enmarca la vista previa */
.df-tel { border: 1px solid var(--linea); border-radius: 20px; background: linear-gradient(180deg, #f8fafc, #eef2f7); padding: 14px; }
.df-pantalla { background: #fff; border-radius: 14px; padding: 14px; max-height: 70vh; overflow-y: auto; }
.df-pantalla .vc-comprar[hidden] { display: none; }
.df-pantalla .form-cod { border: 2px solid var(--acento, var(--primario)); }
.df-pantalla .form-cod.df-pv-modal { box-shadow: 0 14px 40px rgba(15, 23, 42, .18); }
.df-pantalla .campo { margin-bottom: 12px; }
.df-pantalla .btn-comprar { display: flex; align-items: center; justify-content: center; gap: 10px; }
/* Sin transición en la previa: el botón real usa `transition: .18s` sobre `all`,
   y al cambiar por JS las variables --cf-btn-* la transición se queda a medias
   y el color/redondeo no se refrescan. En la tienda no pasa: ahí se pintan una vez. */
.df-pantalla .btn-comprar, .df-pantalla .vc-comprar { transition: none; }

.vc-comprar[hidden] { display: none; }

.pop-previa { margin-top: 18px; }
.pop-marco { position: relative; min-height: 190px; border: 1px solid var(--linea); border-radius: 16px;
  background: linear-gradient(180deg, #f8fafc, #eef2f7); padding: 16px; display: flex; align-items: flex-end; overflow: hidden; }
.pop-marco.pop-der { justify-content: flex-end; }
.pop-marco .vc-pop { position: static; width: min(340px, 100%); opacity: 1; transform: none; }

/* ===================== Ofertas de Cantidad (R3) ===================== */
/* --- Storefront: precio anterior tachado + plantillas de diseño --- */
.oferta-op .oferta-antes { grid-column: 3; justify-self: end; font-size: 12px; color: var(--gris); text-decoration: line-through; }
/* Cuando aplica una Oferta de Cantidad, sus colores/tamaños mandan (via --oc-*). */
[class*="oc-plantilla"] .oferta-op { border-color: var(--oc-borde); background: var(--oc-fondo); border-radius: var(--oc-radio); }
[class*="oc-plantilla"] .oferta-op input { accent-color: var(--oc-acento); }
[class*="oc-plantilla"] .oferta-op .oferta-precio { color: var(--oc-acento); font-size: var(--oc-tam); }
[class*="oc-plantilla"] .oferta-op .oferta-tag { background: var(--oc-acento); }
[class*="oc-plantilla"] .oferta-op.sel { border-color: var(--oc-acento); background: color-mix(in srgb, var(--oc-acento) 8%, var(--oc-fondo)); }
[class*="oc-plantilla"] .oferta-op.destacada { box-shadow: 0 0 0 2px var(--oc-acento); }
.oc-plantilla-moderno .oferta-op { padding: 15px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.oc-plantilla-moderno .oferta-op.destacada { box-shadow: 0 4px 14px color-mix(in srgb, var(--oc-acento) 30%, transparent); }
.oc-plantilla-vertical .oferta-op { grid-template-columns: auto 1fr; grid-auto-rows: min-content; row-gap: 6px; }
.oc-plantilla-vertical .oferta-op .oferta-precio,
.oc-plantilla-vertical .oferta-op .oferta-antes { grid-column: 2; justify-self: start; text-align: left; }
.oc-sin-img .oferta-op .oferta-mini { display: none; }

/* --- Panel: pestanas del Impulsor --- */
.imp-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin: 4px 0 18px; overflow-x: auto; }
.imp-tab { padding: 10px 16px; font-weight: 700; font-size: 14px; color: var(--gris); border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; }
.imp-tab.activo { color: var(--acento); border-bottom-color: var(--acento); }
.imp-tab-pronto { color: #b6bcc6; cursor: default; }
.imp-tab-pronto::after { content: " · pronto"; font-size: 11px; }

/* --- Panel: lista de ofertas --- */
.oc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.oc-top-txt { color: var(--gris); font-size: 14px; }
.oc-vacio { text-align: center; padding: 40px 16px; border: 2px dashed var(--linea); border-radius: 14px; }
.oc-vacio h2 { margin: 8px 0 4px; font-size: 18px; }
.oc-vacio p { color: var(--gris); margin: 0 0 14px; }
.oc-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.oc-tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); padding: 11px 12px; background: #f8fafc; border-bottom: 1px solid var(--linea); }
.oc-tabla td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.oc-tabla tr:last-child td { border-bottom: 0; }
.oc-tabla tr.oc-inact { opacity: .55; }
.oc-col-pri, .oc-col-act { width: 1%; white-space: nowrap; }
.oc-pri { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--acento) 12%, #fff); color: var(--acento); font-weight: 800; font-size: 13px; }
.oc-nom { font-weight: 700; color: var(--tinta); text-decoration: none; }
.oc-nom:hover { color: var(--acento); }
.oc-sub { font-size: 12px; color: var(--gris); margin-top: 2px; }
.oc-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: #eef2f7; color: #475569; }
.oc-badge-todos { background: color-mix(in srgb, var(--acento) 14%, #fff); color: var(--acento); }
.oc-acc { display: flex; gap: 4px; align-items: center; }
.oc-acc form { display: inline; margin: 0; }
.oc-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--linea); background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--tinta); text-decoration: none; gap: 4px; }
.oc-ico:hover { border-color: var(--acento); color: var(--acento); }
.oc-ico-off { opacity: .3; cursor: default; }
.oc-ico-del:hover { border-color: var(--peligro); color: var(--peligro); }
.oc-cards { display: none; }
.oc-card { border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fff; }
.oc-card.oc-inact { opacity: .55; }
.oc-card-top { display: flex; align-items: center; gap: 8px; }
.oc-card-top .oc-nom { flex: 1; }
.oc-card-int { margin-left: auto; }
.oc-card-meta { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.oc-card .oc-acc { flex-wrap: wrap; }

/* --- Panel: editor de oferta --- */
.oce-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.oce-top h1 { font-size: 22px; margin: 0; }
.oce-volver { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--linea); border-radius: 10px; text-decoration: none; font-size: 20px; color: var(--tinta); }
.oce-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.oce-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.oce-card h2 { font-size: 16px; margin: 0 0 10px; }
.oce-card-head { display: flex; align-items: center; justify-content: space-between; }
.oce-card-head h2 { margin: 0; }
.int-txt { font-size: 13px; font-weight: 600; margin-left: 8px; }
.oce-obj { display: grid; gap: 8px; }
.oce-obj-op { display: flex; align-items: flex-start; gap: 10px; border: 2px solid var(--linea); border-radius: 12px; padding: 12px; cursor: pointer; }
.oce-obj-op:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, #fff); }
.oce-obj-op input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acento); }
.oce-obj-op b { display: block; font-size: 14px; }
.oce-obj-op small { color: var(--gris); font-size: 12.5px; }
.oce-picker { max-height: 280px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; margin-top: 8px; }
.oce-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--linea); cursor: pointer; }
.oce-pick:last-child { border-bottom: 0; }
.oce-pick.sel { background: color-mix(in srgb, var(--acento) 7%, #fff); }
.oce-pick input { width: 18px; height: 18px; accent-color: var(--acento); }
.oce-pick-mini { width: 34px; height: 34px; border-radius: 7px; background: #f1f5f9 center/cover no-repeat; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.oce-pick-nom { flex: 1; font-size: 13.5px; font-weight: 600; }
.oce-pick-precio { font-size: 13px; color: var(--gris); }
.oce-niveles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.oce-nivel { display: grid; grid-template-columns: 62px 1fr 96px auto auto auto; gap: 8px; align-items: center; }
.ocn-cant, .ocn-tit, .ocn-desc { border: 1px solid var(--linea); border-radius: 8px; padding: 8px; font-size: 13px; }
.ocn-desc-caja { display: flex; align-items: center; gap: 4px; }
.ocn-desc { width: 54px; }
.ocn-dest { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--linea); border-radius: 8px; cursor: pointer; }
.ocn-dest input { display: none; }
.ocn-dest span { color: #cbd5e1; font-size: 16px; }
.ocn-dest:has(input:checked) { border-color: #f59e0b; }
.ocn-dest:has(input:checked) span { color: #f59e0b; }
.oce-plantillas { display: flex; gap: 8px; }
.oce-pl { flex: 1; text-align: center; border: 2px solid var(--linea); border-radius: 10px; padding: 10px; cursor: pointer; font-size: 13px; font-weight: 600; }
.oce-pl:has(input:checked) { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, #fff); }
.oce-pl input { display: none; }
.oce-colores { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.oce-color { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 600; }
.oce-color input { width: 52px; height: 34px; border: 1px solid var(--linea); border-radius: 8px; padding: 2px; cursor: pointer; }
.oce-guardar { display: flex; gap: 10px; justify-content: flex-end; }
.oce-preview-caja { position: sticky; top: 16px; background: #f8fafc; border: 1px solid var(--linea); border-radius: 14px; padding: 14px; }
.oce-preview-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris); font-weight: 700; }
.oce-preview-sub { font-size: 12.5px; color: var(--gris); margin: 2px 0 12px; }
.oce-pv-form { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }

@media (min-width: 1000px) {
  .oce-grid { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
  .oce-config { grid-column: 1; }
  .oce-preview { grid-column: 2; }
}
@media (max-width: 760px) {
  .oc-tabla { display: none; }
  .oc-cards { display: block; }
  .oce-nivel { grid-template-columns: 54px 1fr auto auto auto; grid-auto-flow: row; }
  .oce-nivel .ocn-tit { grid-column: 1 / 3; }
  .oce-nivel .ocn-desc-caja { grid-column: 1; }
}

/* ===================== Dominio propio (conector estilo Shopify) ===================== */
.dom-caja { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin: 0 0 16px; max-width: 640px; }
.dom-label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.dom-form { display: flex; gap: 8px; }
.dom-form input { flex: 1; min-width: 0; border: 1px solid var(--linea); border-radius: 10px; padding: 11px 12px; font-size: 15px; }
.dom-quitar { display: inline-block; margin-top: 12px; background: none; border: none; color: var(--peligro); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.dom-h2 { font-size: 15px; margin: 0 0 4px; }
.dom-estado-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }

/* Flujo de pasos */
.dom-pasos { display: flex; flex-direction: column; gap: 2px; }
.dom-paso { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; position: relative; }
.dom-paso .dom-bolita { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--linea); background: #fff; margin-top: 1px; position: relative; transition: .2s; }
.dom-paso:not(:last-child) .dom-bolita::after { content: ""; position: absolute; left: 50%; top: 22px; transform: translateX(-50%); width: 2px; height: 26px; background: var(--linea); }
.dom-paso b { font-size: 14px; display: block; }
.dom-paso small { color: var(--gris); font-size: 12.5px; }
.dom-paso.ok .dom-bolita { background: var(--ok, #16a34a); border-color: var(--ok, #16a34a); }
.dom-paso.ok .dom-bolita::before { content: "✓"; color: #fff; font-size: 13px; font-weight: 800; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.dom-paso.ok .dom-bolita::after { background: var(--ok, #16a34a); }
.dom-paso.activo .dom-bolita { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent); animation: domPulso 1.3s infinite; }
.dom-paso.alerta .dom-bolita { border-color: #f59e0b; background: #fef3c7; }
@keyframes domPulso { 0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--acento) 8%, transparent); } }
.dom-mensaje { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--linea); }
.dom-estado.est-conectado .dom-mensaje { background: color-mix(in srgb, var(--ok, #16a34a) 8%, #fff); border-color: color-mix(in srgb, var(--ok, #16a34a) 30%, #fff); }
.dom-estado.est-dns-otro .dom-mensaje { background: #fffbeb; border-color: #fde68a; }

/* Registros DNS */
.dom-dns { display: flex; flex-direction: column; gap: 10px; }
.dom-reg { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 10px; align-items: end; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; background: #f8fafc; }
.dom-reg-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dom-reg-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--gris); font-weight: 700; }
.dom-reg-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; font-weight: 700; word-break: break-all; }
.dom-copiar { align-self: flex-start; margin-top: 4px; border: 1px solid var(--linea); background: #fff; border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--acento); }
.dom-copiar:hover { border-color: var(--acento); }
.dom-copiar.ok { background: color-mix(in srgb, var(--ok, #16a34a) 12%, #fff); color: var(--ok, #16a34a); border-color: color-mix(in srgb, var(--ok, #16a34a) 40%, #fff); }

/* Guías por proveedor */
.dom-guia { border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.dom-guia summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 14px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.dom-guia summary::after { content: "▸"; color: var(--gris); transition: .2s; }
.dom-guia[open] summary::after { transform: rotate(90deg); }
.dom-guia summary::-webkit-details-marker { display: none; }
.dom-guia ol { margin: 0; padding: 0 16px 14px 34px; font-size: 13.5px; line-height: 1.8; color: var(--tinta2); }

@media (max-width: 620px) {
  .dom-reg { grid-template-columns: 1fr 1fr; }
  .dom-reg-col:first-child { grid-column: 1 / 3; }
}

/* ===================== Prevención de fraude (R4) ===================== */
.fr-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin: 4px 0 18px; overflow-x: auto; }
.fr-tab { padding: 10px 14px; font-weight: 700; font-size: 14px; color: var(--gris); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; cursor: pointer; }
.fr-tab.activo { color: var(--acento); border-bottom-color: var(--acento); }
.fr-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin-bottom: 14px; max-width: 640px; }
.fr-h2 { font-size: 16px; margin: 0 0 8px; }
.fr-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.fr-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acento); flex-shrink: 0; }
.fr-check b { display: block; font-size: 14.5px; }
.fr-check small { color: var(--gris); font-size: 12.5px; }
.fr-inline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; margin-top: 10px; color: var(--tinta2); }
.fr-num { width: 66px; border: 1px solid var(--linea); border-radius: 8px; padding: 7px 8px; font-size: 14px; text-align: center; }
.fr-lbl { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.fr-lista { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 13.5px; font-family: ui-monospace, Menlo, monospace; resize: vertical; }
.fr-estado { margin: 10px 0 14px; font-size: 14px; }
.fr-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.fr-badge-on { background: color-mix(in srgb, var(--ok, #16a34a) 15%, #fff); color: var(--ok, #16a34a); }
.fr-badge-off { background: #eef2f7; color: #64748b; }
.fr-obj { display: grid; gap: 8px; margin: 6px 0 4px; }
.fr-obj-op { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--linea); border-radius: 12px; padding: 11px; cursor: pointer; }
.fr-obj-op:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, #fff); }
.fr-obj-op input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acento); flex-shrink: 0; }
.fr-obj-op b { display: block; font-size: 14px; }
.fr-obj-op small { color: var(--gris); font-size: 12.5px; }
.fr-dos { display: grid; gap: 12px; margin-top: 8px; }
.fr-dos input { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 14px; }
.fr-guardar { max-width: 640px; margin-top: 6px; }
@media (min-width: 620px) { .fr-dos { grid-template-columns: 1fr 1fr; } }

/* Storefront: pago parcial (adelanto) */
.cf-parcial { margin: 4px 0 10px; }
.cf-parcial select { width: 100%; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; font-size: 15px; background: #fff; }
.cf-parcial-nota { margin-top: 10px; padding: 11px 13px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 7%, #fff); border: 1px solid color-mix(in srgb, var(--acento) 25%, #fff); font-size: 13.5px; line-height: 1.5; }
.btn-adelanto small { display: block; font-weight: 500; opacity: .9; font-size: 12px; margin-top: 1px; }

/* ===================== Carrito abandonado (R5) ===================== */
.ca-config { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin: 0 0 16px; max-width: 640px; }
.ca-config textarea { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 14px; resize: vertical; }
.ca-master .int-txt { margin-left: 8px; }
.ca-resumen { display: flex; gap: 12px; margin: 0 0 14px; }
.ca-kpi { flex: 1; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; text-align: center; max-width: 200px; }
.ca-kpi b { display: block; font-size: 22px; color: var(--acento); }
.ca-kpi span { font-size: 12px; color: var(--gris); }
.ca-vacio { text-align: center; padding: 36px 16px; border: 2px dashed var(--linea); border-radius: 14px; max-width: 640px; }
.ca-vacio h2 { margin: 8px 0 4px; font-size: 17px; }
.ca-vacio p { color: var(--gris); margin: 0; }
.ca-tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.ca-tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--gris); padding: 10px 12px; background: #f8fafc; border-bottom: 1px solid var(--linea); }
.ca-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.ca-tabla tr:last-child td { border-bottom: 0; }
.ca-tenue { color: var(--gris); font-size: 13px; }
.ca-acc { display: flex; gap: 6px; align-items: center; }
.ca-acc form { margin: 0; }
.ca-cards { display: none; }
.ca-card { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ca-card-top { display: flex; justify-content: space-between; align-items: center; }
.ca-card-sub { color: var(--gris); font-size: 13px; margin: 4px 0 10px; }

/* ===================== Analítica (R5) ===================== */
.an-rangos { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.an-rango { padding: 8px 14px; border: 1px solid var(--linea); border-radius: 20px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--tinta2); background: #fff; }
.an-rango.activo { background: var(--acento); color: #fff; border-color: var(--acento); }
.an-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.an-kpi { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px; }
.an-kpi-lg { grid-column: 1 / -1; background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 12%, #fff), #fff); }
.an-kpi-t { display: block; font-size: 12.5px; color: var(--gris); margin-bottom: 4px; }
.an-kpi b { font-size: 22px; }
.an-kpi-lg b { font-size: 30px; color: var(--acento); }
.an-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; margin-bottom: 16px; max-width: 760px; }
.an-h2 { font-size: 15px; margin: 0 0 12px; }
.an-grafico { display: flex; align-items: flex-end; gap: 3px; height: 130px; }
.an-barra { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 3px; }
.an-barra-fill { width: 100%; background: color-mix(in srgb, var(--acento) 75%, #fff); border-radius: 3px 3px 0 0; min-height: 2px; transition: .2s; }
.an-barra:hover .an-barra-fill { background: var(--acento); }
.an-grafico-pie { display: flex; justify-content: space-between; font-size: 11px; color: var(--gris); margin-top: 6px; }
.an-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.an-mini-i b { display: block; font-size: 19px; color: var(--tinta); }
.an-mini-i span { font-size: 12.5px; color: var(--gris); }
.an-origen { display: flex; flex-direction: column; gap: 12px; }
.an-org-top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 4px; }
.an-org-barra { height: 8px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.an-org-fill { height: 100%; background: var(--acento); border-radius: 6px; }
.an-canal-tiktok { background: #111; }
.an-canal-meta { background: #1877f2; }
.an-canal-pinterest { background: #e60023; }
.an-canal-google { background: #ea4335; }
.an-org-sub { font-size: 12px; color: var(--gris); margin-top: 3px; }
@media (min-width: 620px) { .an-kpis { grid-template-columns: repeat(3, 1fr); } .an-mini { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .ca-tabla { display: none; } .ca-cards { display: block; } }

/* ===================== Widgets de conversión (storefront) ===================== */
.vc-barra { background: var(--vc-bg, #111827); color: #fff; text-align: center; font-size: 13.5px; font-weight: 600; padding: 9px 34px 9px 14px; position: relative; }
.vc-barra-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.8); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px; }
.vc-visit { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #16a34a; font-weight: 600; margin: 2px 0 8px; }
.vc-visit-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: vcPulso 1.6s infinite; }
@keyframes vcPulso { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.vc-count { border: 1.5px solid color-mix(in srgb, var(--vc-c, #e11d48) 40%, #fff); background: color-mix(in srgb, var(--vc-c, #e11d48) 6%, #fff); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.vc-count-tit { font-size: 13px; font-weight: 700; color: var(--vc-c, #e11d48); margin-bottom: 6px; text-align: center; }
.vc-count-reloj { display: flex; align-items: center; justify-content: center; gap: 4px; }
.vc-count-reloj span { display: flex; flex-direction: column; align-items: center; background: var(--vc-c, #e11d48); color: #fff; border-radius: 8px; padding: 5px 8px; min-width: 42px; }
.vc-count-reloj b { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vc-count-reloj small { font-size: 9px; text-transform: uppercase; opacity: .85; margin-top: 2px; }
.vc-count-reloj i { color: var(--vc-c, #e11d48); font-weight: 800; font-style: normal; }
.vc-sold { font-size: 13.5px; color: #b45309; font-weight: 600; margin: 8px 0; }
.vc-stock { margin: 10px 0; }
.vc-stock-txt { font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--tinta2); }
.vc-stock-bar { height: 9px; background: #f1f5f9; border-radius: 6px; overflow: hidden; }
.vc-stock-fill { height: 100%; background: var(--vc-s, #e11d48); border-radius: 6px; transition: width .4s; }
.vc-trust { margin: 14px 0 4px; text-align: center; }
.vc-trust-txt { font-size: 13px; font-weight: 600; color: var(--gris); margin-bottom: 8px; }
.vc-trust-sellos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.vc-sello { font-size: 11.5px; font-weight: 700; padding: 4px 9px; border: 1px solid var(--linea); border-radius: 7px; background: #fff; color: #475569; }

/* ===================== Widgets de conversión (panel) ===================== */
.wg-card { background: #fff; border: 1px solid var(--linea); border-radius: 14px; margin: 0 0 14px; max-width: 680px; overflow: hidden; }
.wg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }
.wg-h b { display: block; font-size: 15px; }
.wg-h small { color: var(--gris); font-size: 12.5px; }
.wg-body { padding: 0 16px 16px; border-top: 1px solid var(--linea); }
.wg-body .campo { margin-top: 12px; }
.wg-body input[type="text"], .wg-body input[type="datetime-local"], .wg-body select { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 14px; }
.wg-fila { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; align-items: flex-end; }
.wg-fila > div { flex: 1; min-width: 120px; }
.wg-lbl { display: block; font-size: 12.5px; font-weight: 600; color: var(--gris); margin-bottom: 5px; }
.wg-num { width: 100%; border: 1px solid var(--linea); border-radius: 10px; padding: 10px; font-size: 14px; }
.wg-color { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.wg-color input { width: 52px; height: 40px; border: 1px solid var(--linea); border-radius: 8px; padding: 2px; cursor: pointer; }
.wg-radios { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.wg-aviso { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #92620a; margin-top: 12px; line-height: 1.5; }
.wg-sellos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.wg-sello { cursor: pointer; }
.wg-sello input { display: none; }
.wg-sello span { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border: 2px solid var(--linea); border-radius: 9px; background: #fff; }
.wg-sello.sel span { border-color: var(--acento); color: var(--acento); background: color-mix(in srgb, var(--acento) 7%, #fff); }
.wg-guardar { max-width: 680px; }

/* ===== Panel · Pedidos estilo Shopify (fila clicable + IP) ===== */
.vc-pbuscar { margin: 12px 0 14px; }
.vc-ptable-wrap { overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; background: #fff; }
.vc-ptable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 940px; }
.vc-ptable thead th { text-align: left; font: 700 12px/1 'Inter'; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; padding: 12px; border-bottom: 1px solid var(--linea); white-space: nowrap; background: #fafafb; }
.vc-ptable tbody td { padding: 11px 12px; border-bottom: 1px solid var(--fondo); vertical-align: middle; }
.vc-ptable tbody tr:last-child td { border-bottom: 0; }
.vc-prow { cursor: pointer; transition: background .12s; }
.vc-prow:hover { background: #f8fafc; }
.vc-prow:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.vc-chk-td { width: 34px; text-align: center; }
.vc-num { font-weight: 700; color: var(--tinta); text-decoration: none; }
.vc-num:hover { text-decoration: underline; }
.vc-sub { font-size: 11.5px; color: var(--gris); }
.vc-arts { display: flex; align-items: center; gap: 9px; }
.vc-art-nom { font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-ip { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: #f1f5f9; color: #334155; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.vc-ua { font-size: 11.5px; color: var(--gris); word-break: break-word; }
.vc-acc { display: flex; gap: 6px; }

/* Tarjetas (móvil) */
.vc-pcards { display: none; flex-direction: column; gap: 10px; }
.vc-pcard { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.vc-pcard:active { background: #f8fafc; }
.vc-pcard:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
.vc-pcard-top { display: flex; align-items: baseline; gap: 8px; }
.vc-pcard-top .vc-num { font-size: 15px; }
.vc-pcard-total { margin-left: auto; font-size: 15px; }
.vc-pcard-cli { margin-top: 4px; font-size: 13.5px; }
.vc-pcard-prod { margin-top: 8px; }
.vc-pcard-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.vc-pcard-badges form { margin: 0; }
.vc-pcard-badges select { max-width: 100%; }
.vc-pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--fondo); }
.vc-ip-line { font-size: 12px; color: var(--gris); }

/* Tarjeta Seguridad en el detalle */
.vc-seg .vc-ip { font-size: 13.5px; }
.vc-seg-nota { font-size: 12px; color: var(--gris); margin: 8px 0 0; }
.vc-seg-nota a { color: var(--tinta); }

@media (max-width: 760px) {
  .vc-ptable-wrap { display: none; }
  .vc-pcards { display: flex; }
}

/* MEDIA_R1 media en descripcion */
.cf-rico img,.cf-rico video,.cf-rico iframe,.pe-rt-area img,.pe-rt-area video,.pe-rt-area iframe{max-width:100%;height:auto;display:block;margin:10px auto;border-radius:10px}
.cf-rico iframe,.pe-rt-area iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.pe-rt-barra [data-media]{cursor:pointer;font-size:11px;font-weight:600;padding:4px 8px}

/* LANDING_R6 landing personalizado de producto */
.landing-custom{max-width:720px;margin:0 auto;padding:0}
.landing-custom .sec-envoltura{margin:0}
.la-img{width:100%;height:auto;display:block}
.la-video{width:100%;height:auto;display:block;background:#000}
.la-embed{position:relative;width:100%;aspect-ratio:16/9}
.la-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.la-embed.la-tiktok{aspect-ratio:9/16;max-width:400px;margin:0 auto}
.la-texto{padding:22px 18px;text-align:center}
.la-texto h2{font-size:22px;font-weight:var(--t-la-h2-peso,800);margin:0 0 8px}
.la-texto p{font-size:15px;line-height:1.6;color:#334155;margin:0}
.la-cta-wrap{padding:14px 18px;text-align:center}
.la-cta-wrap.la-cta-al-izq{text-align:left}.la-cta-wrap.la-cta-al-der{text-align:right}
.la-cta{display:inline-block;width:100%;max-width:520px;box-sizing:border-box;padding:15px 22px;border:2px solid var(--la-cta-bg,#16a34a);border-radius:12px;font-size:17px;font-weight:800;color:var(--la-cta-fg,#fff);background:var(--la-cta-bg,#16a34a);text-align:center;text-decoration:none;box-shadow:0 8px 20px rgba(22,163,74,.3);cursor:pointer}
.la-cta-ancho-contenido .la-cta{width:auto;min-width:220px}.la-cta-estilo-contorno{background:transparent;color:var(--la-cta-bg,#16a34a);box-shadow:none}
.la-cta:hover{filter:brightness(.96);transform:translateY(-1px)}
.landing-cta-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #e5e7eb;padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 -4px 16px rgba(0,0,0,.08)}
.landing-cta-sticky .precio{font-size:18px;font-weight:800;white-space:nowrap}
.landing-cta-sticky a{flex:1;text-align:center;padding:13px;border-radius:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#16a34a,#15803d);text-decoration:none}

.landing-custom,#landing-pedido{grid-column:1 / -1}
.landing-checkout-resumen{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0 44px 14px 0;padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;box-shadow:0 1px 2px rgba(15,23,42,.04)}.landing-checkout-resumen>strong{display:block;min-width:0;color:#334155;font-size:15px;line-height:1.3;overflow-wrap:anywhere}.landing-checkout-resumen>span{display:block;color:var(--acento);font-size:22px;font-weight:900;line-height:1.1;white-space:nowrap}

/* CART_R7 restyle ficha + drawer de carrito */
.compra{background:#fff;border:1px solid #eef0f4;border-radius:16px;padding:22px;box-shadow:0 6px 24px rgba(15,23,42,.05)}
.cf-cta-cart{width:100%;box-sizing:border-box;display:block;margin:0 0 10px;padding:15px 20px;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;background:#fff;color:#0f172a;border:2px solid #0f172a}
.cf-cta-cart:hover{background:#0f172a;color:#fff}
.vc-comprar{width:100%;box-sizing:border-box}
.cart-fab{position:fixed;right:16px;bottom:86px;z-index:70;background:#0f172a;color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;display:flex;align-items:center;gap:8px}
.cart-fab-count{background:#16a34a;border-radius:999px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;padding:0 6px}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:92vw;background:#fff;z-index:100;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column;box-shadow:-6px 0 24px rgba(0,0,0,.15)}
.cart-drawer.on{transform:translateX(0)}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eef0f4;font-size:17px}
.cart-x{border:0;background:none;font-size:24px;cursor:pointer;line-height:1;color:#64748b}
.cart-items{flex:1;overflow:auto;padding:8px 14px}
.cart-empty{padding:30px 18px;color:#94a3b8;text-align:center}
.cart-it{display:flex;gap:12px;padding:12px 4px;border-bottom:1px solid #f1f5f9}
.cart-it-img{width:64px;height:64px;flex:0 0 64px;border-radius:8px;overflow:hidden;background:#f1f5f9}
.cart-it-img img{width:100%;height:100%;object-fit:cover}
.cart-it-info{flex:1;min-width:0}
.cart-it-nom{font-weight:600;font-size:14px;margin-bottom:2px}
.cart-it-var{font-size:12px;color:var(--gris);margin:1px 0 3px}
.cart-it-precio{color:var(--primario,#4f46e5);font-weight:700;font-size:14px}
.cart-qty{display:flex;align-items:center;gap:6px;margin-top:6px}
.cart-qty button{width:28px;height:28px;border:1px solid #d7dbe3;background:#fff;border-radius:8px;cursor:pointer;font-size:15px}
.cart-qty .cart-del{width:auto;padding:0 10px;color:#b91c1c;border-color:#fecaca;font-size:12px}
.cart-foot{border-top:1px solid #eef0f4;padding:14px 16px}
.cart-total-row{display:flex;justify-content:space-between;font-size:16px;margin-bottom:10px}
.cart-seguir{width:100%;padding:11px;border:1px solid #d7dbe3;background:#fff;border-radius:10px;font-weight:600;cursor:pointer;margin-bottom:8px}
.cart-finalizar{width:100%;padding:13px;border:0;border-radius:10px;font-weight:800;color:#fff;background:#16a34a;cursor:pointer}
.cart-finalizar:disabled{background:#cbd5e1;cursor:not-allowed}

/* ===== Bloque 1 - ficha de producto premium (scoped) ===== */
.prod-detalle{max-width:1140px;gap:44px;padding:30px 20px 72px;align-items:start}
@media(min-width:900px){.prod-detalle .galeria{position:sticky;top:20px;align-self:start}}
.galeria .g-carrusel{background:#fff;border-color:#eef0f4;border-radius:16px;overscroll-behavior:contain}
.galeria .g-slide{object-fit:contain;background:#fff}
.galeria .miniaturas{gap:8px;margin-top:12px}
.galeria .miniaturas button{width:72px;height:72px;border-radius:12px}
.compra{padding:26px}
.compra h1{font-size:clamp(24px,2.6vw,33px);line-height:1.22;margin:0 0 2px}
.compra .precios{margin:16px 0 6px;flex-wrap:wrap;gap:12px}
.compra .precio{font-size:clamp(32px,3.6vw,42px)}
.compra .antes{font-size:18px}
.compra .ahorro{font-size:12.5px;padding:6px 11px;border-radius:999px}
.compra .cf-cta-cart,.compra .vc-comprar{min-height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;font-size:16.5px}
.compra .vc-comprar{font-weight:800;box-shadow:0 8px 20px rgba(15,23,42,.10)}
.compra .vc-comprar:hover{filter:brightness(.96)}
.compra .cf-cta-cart{background:#fff;color:#0f172a;border:1.5px solid #d9dfe7;font-weight:700}
.compra .cf-cta-cart:hover{background:#f6f8fb;border-color:#0f172a;color:#0f172a}
.compra .confianza{gap:6px;margin:20px 0 2px}
.compra .confianza div{background:transparent;border:0;padding:7px 0;font-size:13px;color:#475569}
.compra .confianza svg{color:var(--acento);flex:0 0 auto}
.prod-descripcion{max-width:1140px;margin:0 auto;padding:0 20px 76px}
.prod-descripcion h2{font:800 clamp(20px,2.2vw,26px)/1.25 'Inter',sans-serif;letter-spacing:-.01em;margin:0 0 18px;color:#0f172a}
.prod-descripcion .descripcion{font-size:16.5px;line-height:1.75;color:#334155;max-width:880px}
.prod-descripcion .descripcion p{margin:0 0 13px}
.prod-descripcion .descripcion p:empty{display:none}
.prod-descripcion .descripcion img{max-width:100%;height:auto;border-radius:12px}
.prod-descripcion .desc-bullet{position:relative;padding-left:26px;margin:0 0 10px}
.prod-descripcion .desc-bullet::before{content:"";position:absolute;left:7px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acento)}
@media(max-width:899px){
.prod-detalle{gap:22px;padding:16px 14px 60px}
.compra{padding:18px;border-radius:14px}
.compra h1{font-size:23px}
.compra .precio{font-size:32px}
.compra .cf-cta-cart,.compra .vc-comprar{min-height:56px;font-size:17px}
.galeria .g-carrusel{border-radius:14px}
.galeria .miniaturas button{width:60px;height:60px}
.prod-descripcion{padding:0 14px 60px}
.prod-descripcion .descripcion{font-size:16px}
}

/* ===== Fase 0: la tipografia del TEMA debe ganar a los 'Inter' hardcodeados (solo storefront) ===== */
body.tienda-body{font-family:var(--fuente),'Inter',system-ui,sans-serif}
body.tienda-body h1,body.tienda-body h2,body.tienda-body h3,
body.tienda-body .titulo-seccion,body.tienda-body .sec-hero h1,
body.tienda-body .tienda-header .nombre,
body.tienda-body .compra h1,
body.tienda-body .prod-descripcion h2,
body.tienda-body .prod-extra h2,
body.tienda-body .resenas-cab h2{font-family:var(--fuente-tit),var(--fuente),'Inter',system-ui,sans-serif}
body.tienda-body .compra .precio,
body.tienda-body .prod-pub .precio,
body.tienda-body .barra-movil .precio,
body.tienda-body .cart-total-row strong{font-family:var(--fuente-tit),var(--fuente),'Inter',system-ui,sans-serif}

/* ===== Fase 1: escala y densidad del tema (fallback 1 = identico si no se configura) ===== */
body.tienda-body .compra h1{font-size:calc(clamp(24px,2.6vw,33px) * var(--t-escala,1))}
body.tienda-body .compra .precio{font-size:calc(clamp(32px,3.6vw,42px) * var(--t-escala,1))}
body.tienda-body .prod-descripcion h2{font-size:calc(clamp(20px,2.2vw,26px) * var(--t-escala,1))}
body.tienda-body .prod-descripcion .descripcion{font-size:calc(16.5px * var(--t-escala,1))}
body.tienda-body .prod-detalle{gap:calc(44px * var(--t-densidad,1))}
body.tienda-body .compra{padding:calc(26px * var(--t-densidad,1))}
body.tienda-body .prod-descripcion .descripcion p{margin-bottom:calc(13px * var(--t-densidad,1))}

/* ===== Fase 2: defaults premium - header, slideshow, tarjetas (scoped storefront) ===== */
/* 1. WhatsApp del header fuera: ya existe el boton flotante */
body.tienda-body .tienda-header .btn-wa{display:none}
/* 2. Slideshow: placeholder suave y flechas mas discretas */
body.tienda-body .sec-slideshow .ss-pista{background:linear-gradient(180deg,#f4f6f9,#e9edf2)}
body.tienda-body .sec-slideshow .ss-flecha{width:36px;height:36px;font-size:20px;background:rgba(255,255,255,.9)}
/* 3. Tarjetas: boton entero, titulo a 2 lineas, precio claro */
body.tienda-body .prod-pub .cuerpo{display:flex;flex-direction:column;gap:6px;padding:12px 12px 14px}
body.tienda-body .prod-pub .nombre{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;min-height:2.6em}
body.tienda-body .prod-pub .precio{font-size:18px}
body.tienda-body .prod-pub .cta{margin-top:auto;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;padding:10px 12px;font-size:13.5px;white-space:normal;box-sizing:border-box}
/* 4. Movil: header compacto y tarjetas legibles */
@media(max-width:560px){
body.tienda-body .tienda-header .interior{padding:10px 14px;gap:10px;flex-wrap:wrap}
body.tienda-body .tienda-header img.logo{height:calc(var(--t-logo-alto,40px) * 0.8);max-width:200px}
body.tienda-body .tienda-header .nombre{font-size:16px}
body.tienda-body .tienda-header .ciudad{display:none}
body.tienda-body .tienda-header nav{width:100%;display:flex;gap:18px;overflow-x:auto;padding-top:2px;scrollbar-width:none}
body.tienda-body .tienda-header nav::-webkit-scrollbar{display:none}
body.tienda-body .tienda-header nav a{white-space:nowrap;font-size:14px}
body.tienda-body .prod-pub .cta{font-size:13px;min-height:46px}
body.tienda-body .prod-pub .nombre{font-size:14px}
}
/* Carrusel: el slide marcado como activo manda sobre el opacity inline del JS (evita el bloque vacio) */
body.tienda-body .sec-slideshow .ss-slide.activa{opacity:1 !important}
/* ===== Rendimiento: no renderizar ni descargar tarjetas fuera de pantalla ===== */
body.tienda-body .prod-pub{content-visibility:auto;contain-intrinsic-size:auto 380px}

.prod-pub .foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Accion principal del panel: Personalizar tienda */
.panel-menu a.menu-destacado { color:#fff; background:rgba(99,102,241,.16); border:1px solid rgba(168,85,247,.42); }
.panel-menu a.menu-destacado svg { opacity:1; }
.panel-menu a.menu-destacado:hover { background:rgba(99,102,241,.30); }
.panel-menu a.menu-destacado.activo { border-color:transparent; }
.hoja-mas a.menu-destacado { background:color-mix(in srgb, var(--primario) 8%, transparent); border:1px solid color-mix(in srgb, var(--primario) 30%, transparent); color:var(--primario); }
.hoja-mas a.menu-destacado svg { color:var(--primario); }
.menu-hairline { height:1px; background:rgba(148,163,184,.18); margin:8px 12px; }

/* --- Selector de metodo de pago (contra entrega / tarjeta) --- */
/* ---- Boton 2 (tarjeta): patron Releasit ----
   CTA principal solido arriba + tarjeta secundaria con borde debajo.
   Sustituye al antiguo selector de radios .cf-metodo (retirado). */
.cf-tarjeta {
  display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; text-align:left;
  background: var(--cf-b2-bg, #fff); color: var(--cf-b2-fg, #111);
  border: var(--cf-b2-borde-ancho, 2px) solid var(--cf-b2-borde, var(--acento, #111));
  border-radius: var(--cf-b2-radio, 12px);
  padding: 14px 16px; min-height: 56px; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
  transition: filter .15s ease, transform .1s ease;
}
.cf-tarjeta:hover { filter: brightness(.96); }
.cf-tarjeta:active { transform: scale(.995); }
.cf-tarjeta:focus-visible { outline: 2px solid var(--cf-b2-borde, var(--acento, #111)); outline-offset: 2px; }
.cf-tarjeta .cf-ico { width:1.45em; height:1.45em; flex:0 0 auto; }
.cf-tarjeta-txt { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.cf-tarjeta-txt b { font-weight:800; font-size: var(--cf-b2-tam, 16px); }
.cf-tarjeta-txt small { font-weight:500; font-size:.8em; opacity:.72; margin-top:3px; }
@media (max-width:480px){ .cf-tarjeta { padding:13px 14px; gap:10px; } }

/* Red de seguridad del icono: nunca debe estirarse dentro de un boton flex. */
.cf-ico { flex: 0 0 auto; flex-shrink: 0; max-width: 24px; max-height: 24px; }
.cf-tarjeta .cf-ico { width: 20px; height: 20px; align-self: center; }
.btn-comprar .cf-ico, .vc-comprar .cf-ico { width: 1.15em; height: 1.15em; }

/* ==========================================================
   EDITOR VISUAL V2 — flujo inspirado en Shopify
   Solo afecta /panel/diseno y el resaltado ?editor=1.
   ========================================================== */
.ed-body{background:#f4f4f4;color:#202223}
.ed-shell{grid-template-rows:48px minmax(0,1fr);grid-template-columns:318px minmax(0,1fr);background:#f4f4f4}
.ed-shell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ed-topbar{display:grid;grid-template-columns:minmax(210px,318px) minmax(280px,1fr) auto;gap:12px;min-width:0;padding:0 10px;height:48px;border-bottom-color:#dfe3e8;box-shadow:none}
.ed-top-izq,.ed-top-acciones,.ed-top-centro{display:flex;align-items:center;min-width:0}
.ed-top-izq{gap:8px}.ed-top-centro{justify-content:center;gap:10px;font:500 12px/1.2 Inter,sans-serif;color:#4a5568;overflow:hidden}.ed-top-acciones{justify-content:flex-end;gap:6px}
.ed-salir{width:30px;height:30px;border-radius:7px;font-size:18px}.ed-salir:hover{background:#edf0f2}
.ed-modos{display:inline-flex;gap:3px}.ed-modo,.ed-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:#59636e;cursor:pointer;transition:.12s}
.ed-modo:hover,.ed-icon-btn:hover{background:#edf0f2;color:#202223}.ed-modo.on{background:#eaf3ff;color:#1675d1}.ed-modo.on svg{stroke-width:2}.ed-icon-btn{border-color:#dfe3e8;background:#fff}.ed-icon-btn:disabled{opacity:.3;cursor:default;background:#f7f7f7}
.ed-top-tema,.ed-top-pagina{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}.ed-top-tema strong,.ed-top-pagina{overflow:hidden;text-overflow:ellipsis}.ed-top-tema svg,.ed-top-pagina svg{width:15px;height:15px}.ed-badge-activo{padding:3px 7px;border-radius:999px;background:#d8f7e4;color:#167b3e;font:700 10px/1 Inter,sans-serif}.ed-top-divisor{width:1px;height:20px;background:#dfe3e8;flex:0 0 auto}
.ed-device{background:#edf0f2;border-radius:8px;padding:2px}.ed-dev{width:31px;height:26px;border-radius:6px}.ed-dev svg{width:15px;height:15px}.ed-dev.on{box-shadow:0 1px 2px rgba(15,23,42,.14)}
.ed-guardado{min-width:0;padding:0 4px;color:#168a45;font-size:11px;white-space:nowrap}.ed-guardado.sucio{color:#a16207}
.ed-top-save{height:30px;min-width:72px;padding:0 13px;border:0;border-radius:7px;background:#202223;color:#fff;font:700 12px/1 Inter,sans-serif;cursor:pointer}.ed-top-save:hover:not(:disabled){background:#353739}.ed-top-save:disabled{background:#d7d9dc;color:#f8f8f8;cursor:default}
.ed-mas{position:relative}.ed-mas>summary{display:flex;align-items:center;justify-content:center;width:34px;height:30px;border:1px solid #dfe3e8;border-radius:7px;background:#fff;color:#4b5563;cursor:pointer;list-style:none;font-weight:800;letter-spacing:1px}.ed-mas>summary::-webkit-details-marker{display:none}.ed-mas[open]>summary{background:#edf0f2}.ed-mas-menu{position:absolute;right:0;top:36px;width:176px;padding:5px;background:#fff;border:1px solid #dfe3e8;border-radius:9px;box-shadow:0 12px 30px rgba(15,23,42,.16);z-index:30}.ed-mas-menu a{display:block;padding:9px 10px;border-radius:6px;color:#30343a;text-decoration:none;font:600 12px/1.2 Inter,sans-serif}.ed-mas-menu a:hover{background:#f1f3f5}

.ed-sidebar{border-right-color:#d7dbe0;box-shadow:1px 0 0 rgba(15,23,42,.02)}
.ed-vista{background:#fff}.ed-vista-head{min-height:52px;padding:10px 12px;border-bottom-color:#e5e7eb}.ed-vista-head h2{margin:0;font-size:14px}.ed-vista-head small{display:block;margin-top:3px;color:#7b8490;font:400 10.5px/1.25 Inter,sans-serif}.ed-back{width:28px;height:28px;border-radius:6px;background:transparent}.ed-back:hover{background:#edf0f2}
.ed-page-head{padding:11px 12px 10px;border-bottom:1px solid #e5e7eb;background:#fff}.ed-page-title{display:flex;align-items:center;gap:9px;margin-bottom:9px}.ed-page-title>span{display:flex;color:#59636e}.ed-page-title svg{width:17px;height:17px}.ed-page-title div{min-width:0}.ed-page-title small{display:block;color:#7b8490;font:500 10px/1.1 Inter,sans-serif}.ed-page-title strong{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12.5px/1.2 Inter,sans-serif;color:#30343a}
.ed-context-select,.ed-context-sub{width:100%;height:34px;border:1px solid #cfd4da;border-radius:7px;background:#fff;padding:0 30px 0 9px;color:#30343a;font:500 12px/1 Inter,sans-serif;outline:none}.ed-context-select:focus,.ed-context-sub:focus{border-color:#2583e8;box-shadow:0 0 0 2px rgba(37,131,232,.13)}.ed-context-sub{margin-top:7px;background:#f8f9fa}.ed-context-help{margin:8px 0 0;color:#7b8490;font:400 11px/1.4 Inter,sans-serif}.ed-context-help button{padding:0;border:0;background:none;color:#1675d1;font:inherit;cursor:pointer}.ed-context-help a{color:#1675d1}
.ed-product-layout{display:flex;align-items:center;gap:10px;margin:4px 8px 0;padding:11px 10px;border:1px solid #dce3ea;border-radius:9px;background:#fff}.ed-product-layout-copy{min-width:0;flex:1}.ed-product-layout-copy strong{display:block;color:#252a31;font:650 11.8px/1.25 Inter,sans-serif}.ed-product-layout-copy small{display:block;margin-top:3px;color:#76808b;font:400 10px/1.3 Inter,sans-serif}.ed-product-layout-help{margin:7px 10px 11px;color:#68737f;font:400 10px/1.45 Inter,sans-serif}.ed-switch{position:relative;display:block;width:36px;height:21px;flex:0 0 36px}.ed-switch input{position:absolute;opacity:0;pointer-events:none}.ed-switch span{position:absolute;inset:0;border-radius:999px;background:#c7cdd4;cursor:pointer;transition:.18s}.ed-switch span:after{content:'';position:absolute;width:15px;height:15px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}.ed-switch input:checked+span{background:#18a957}.ed-switch input:checked+span:after{transform:translateX(15px)}.ed-switch input:disabled+span{opacity:.55;cursor:wait}
.ed-home-scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:18px;scrollbar-width:thin}.ed-sec-head{padding:12px 12px 6px;border-top:0;margin:0}.ed-sec-head h2{font-size:11px;text-transform:none;letter-spacing:0;color:#4b5563}.ed-sec-head span{font-size:9.5px}.ed-lista{display:flex;flex:none;overflow:visible;gap:1px;padding:0 7px}
.ed-fila{position:relative;gap:5px;min-height:40px;padding:3px 4px;border-radius:7px}.ed-fila:hover{background:#f0f1f2}.ed-fila.vy-sel{background:#eaf3ff;box-shadow:inset 0 0 0 1px #2583e8}.ed-fila.apagada{opacity:1}.ed-fila.apagada .ed-fila-copy,.ed-fila.apagada .ed-fila-ico{opacity:.42}.ed-fila.arrastrando{background:#eaf3ff;box-shadow:0 5px 18px rgba(15,23,42,.12)}.ed-asa{width:13px;color:#aeb4bb;cursor:grab;font-size:11px;letter-spacing:-3px}.ed-fila-info{display:flex;align-items:center;gap:8px;padding:4px 2px;min-width:0}.ed-fila-ico{display:flex;align-items:center;justify-content:center;width:19px;color:#5c6670;flex:0 0 19px}.ed-fila-ico svg{width:16px;height:16px}.ed-fila-copy{min-width:0;flex:1}.ed-fila-tit{font-size:12px;font-weight:600;color:#30343a}.ed-fila-sub{font-size:10px;color:#8a939d;margin-top:2px}.ed-fila-btn{width:27px;height:27px;border-radius:6px;color:#67717c}.ed-fila-btn svg{width:14px;height:14px}.ed-eye-off{display:none}.ed-fila.apagada .ed-eye-on{display:none}.ed-fila.apagada .ed-eye-off{display:inline-flex}
.ed-add{display:flex;align-items:center;gap:7px;width:calc(100% - 8px);margin:2px 4px 5px;padding:8px 9px;border:0;border-radius:7px;background:transparent;color:#1675d1;text-align:left;font:600 11.5px/1 Inter,sans-serif}.ed-add:hover{border:0;background:#eaf3ff}.ed-add span{font-size:15px}.ed-global-head{padding-top:15px;border-top:1px solid #e5e7eb}.ed-global-list{padding:0 7px}.ed-global-btn{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:5px 7px;border:0;border-radius:7px;background:transparent;color:#30343a;text-align:left;text-decoration:none;cursor:pointer}.ed-global-btn:hover{background:#f0f1f2}.ed-global-ico{display:flex;align-items:center;justify-content:center;width:20px;color:#5f6973}.ed-global-ico svg{width:16px;height:16px}.ed-global-btn>span:nth-child(2){min-width:0;flex:1;font:600 11.8px/1.2 Inter,sans-serif}.ed-global-btn small{display:block;margin-top:2px;color:#8a939d;font:400 9.8px/1.2 Inter,sans-serif}.ed-global-btn>b{color:#98a1aa;font:500 13px/1 Inter,sans-serif}

.ed-panel-cuerpo{padding:12px;background:#f8f9fa}.ed-grupo{border-color:#dfe3e8;border-radius:9px;background:#fff;padding:12px;margin-bottom:10px;box-shadow:0 1px 1px rgba(15,23,42,.02)}.ed-grupo-tit{margin-bottom:11px;color:#4b5563;font-size:10.5px;letter-spacing:.025em}.ed-presets{gap:5px;margin-bottom:10px}.chip-preset{min-height:29px}.ed-vista-pie{padding:9px 12px;border-top-color:#dfe3e8}.ed-btn-primario,.ed-btn-danger{border-radius:7px;padding:10px 13px;font-size:12px}.ed-tipos{grid-template-columns:1fr;gap:6px}.ed-tipo{display:grid;grid-template-columns:30px 1fr;column-gap:8px;border-radius:8px;padding:9px 10px}.ed-tipo-ico{grid-row:1/3;font-size:20px}.ed-tipo-nom{font-size:12px}.ed-tipo-desc{font-size:10px}.ed-campos .campo{margin-bottom:10px}

.ed-apps-panel{padding:11px}.ed-app-intro{display:flex;gap:10px;padding:11px;margin-bottom:9px;border:1px solid #cfe2f7;border-radius:9px;background:#f0f7ff}.ed-app-intro>span{display:flex;color:#1675d1}.ed-app-intro strong{font:700 12px/1.2 Inter,sans-serif}.ed-app-intro p{margin:4px 0 0;color:#637080;font:400 10px/1.4 Inter,sans-serif}.ed-app-list{display:flex;flex-direction:column;gap:5px}.ed-app-card{display:grid;grid-template-columns:30px minmax(0,1fr) auto 12px;align-items:center;gap:8px;padding:9px;border:1px solid #e1e4e8;border-radius:9px;background:#fff;color:#30343a;text-decoration:none;transition:.12s}.ed-app-card:hover{border-color:#aebfce;box-shadow:0 3px 10px rgba(15,23,42,.07)}.ed-app-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;background:#f0f2f4;color:#56616d}.ed-app-ico svg{width:16px;height:16px}.ed-app-copy{min-width:0}.ed-app-copy strong{display:block;font:650 11.5px/1.2 Inter,sans-serif}.ed-app-copy small{display:block;margin-top:2px;color:#7b8490;font:400 9.5px/1.25 Inter,sans-serif}.ed-app-status{padding:3px 6px;border-radius:999px;background:#f0f1f2;color:#7b8490;font:700 8.5px/1 Inter,sans-serif;white-space:nowrap}.ed-app-status.on{background:#dff6e7;color:#167b3e}.ed-app-card>b{color:#9aa2aa;font:500 11px/1 Inter,sans-serif}.ed-app-more{display:block;margin-top:10px;padding:9px;border-radius:7px;color:#1675d1;text-align:center;text-decoration:none;font:650 11px/1 Inter,sans-serif}.ed-app-more:hover{background:#eaf3ff}

.ed-preview{align-items:flex-start;min-width:0;padding:10px;background:#f1f2f3}.ed-preview iframe{display:block;flex:1 1 auto;min-width:0;width:100%;max-width:none;height:100%;border:1px solid #d8dce1;border-radius:6px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.08)}.ed-preview.movil{padding:20px}.ed-preview.movil iframe{flex:0 0 auto;width:390px;max-width:100%;height:calc(100% - 4px);border:7px solid #1f2937;border-radius:26px;box-shadow:0 14px 38px rgba(15,23,42,.24)}
.sec-editable{position:relative;transition:outline-color .12s}.sec-editable:hover{outline:2px solid #2583e8!important;outline-offset:-2px}.sec-editable.vy-sel{outline:3px solid #2583e8!important;outline-offset:-3px}.sec-editable.vy-sel:before{content:"Sección seleccionada";position:absolute;left:0;top:0;z-index:50;padding:4px 7px;background:#2583e8;color:#fff;font:600 10px/1 Inter,sans-serif;border-radius:0 0 5px 0;pointer-events:none}

@media(max-width:1240px){.ed-shell{grid-template-columns:300px minmax(0,1fr)}.ed-topbar{grid-template-columns:230px minmax(220px,1fr) auto}.ed-top-tema strong{max-width:100px}.ed-guardado{display:none}.ed-icon-btn:disabled{display:none}}
@media(max-width:900px){.ed-shell{grid-template-columns:1fr;grid-template-rows:48px minmax(0,1fr)}.ed-topbar{grid-template-columns:auto 1fr auto}.ed-top-centro{display:none}.ed-preview{display:none}.ed-sidebar{border-right:0}.ed-top-acciones .ed-icon-btn,.ed-top-acciones .ed-mas{display:none}.ed-top-acciones{grid-column:3}.ed-device{display:none}}
@media(max-width:520px){.ed-topbar{padding:0 6px;gap:4px}.ed-top-izq{gap:3px}.ed-modo{width:28px}.ed-top-save{min-width:64px;padding:0 10px}.ed-sidebar{min-width:0}.ed-page-head{padding-left:10px;padding-right:10px}}

/* Panel: selector visual de iconos (fila clicable) y ayuda de variables. */
.df-iconos { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.df-ico-op { display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  padding:0; background:#fff; border:1px solid var(--linea, #d8d8d8); border-radius:9px;
  cursor:pointer; color:#111; transition: border-color .12s, background .12s; }
.df-ico-op:hover { background:#f6f7f9; }
.df-ico-op.sel { border-color:#111; border-width:2px; background:#f4f4f5; }
.df-ico-op[disabled] { opacity:.45; cursor:not-allowed; }
.df-ico-op .cf-ico { width:18px; height:18px; }
.df-ico-no { font-size:15px; opacity:.5; }
.df-vars code { background:#eef2f7; border-radius:4px; padding:1px 5px; font-size:.92em; }

/* ===== Inicio del panel: tarjetas KPI, chips de variación y gráfica del día =====
   Todo lo de aquí es nuevo y va con prefijo dash- / kpi-: no toca ni un estilo
   existente del resto del panel. */
.dash-cab { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:2px 0 12px; }
.dash-cab h2 { font-size:16px; margin:0; }
.dash-cab .dash-dia { font-size:12.5px; color:var(--gris); }

.kpis { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
@media (min-width: 760px) { .kpis { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.kpi { background:#fff; border:1px solid var(--linea); border-radius:var(--radio); padding:15px 16px; box-shadow:var(--sombra); min-width:0; }
.kpi .kpi-nombre { font-size:12px; color:var(--gris); font-weight:600; letter-spacing:.01em; }
.kpi .kpi-valor { font:800 clamp(21px, 6vw, 29px)/1.1 'Inter'; letter-spacing:-.02em; margin-top:6px;
  /* Un total largo (S/ 12,480.00) se encoge antes que romper la tarjeta. */
  overflow-wrap:anywhere; }
.kpi .kpi-pie { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--gris); }
.kpi.kpi-alerta { border-color:#fecaca; background:linear-gradient(160deg,#fff5f5,#fff); }
.kpi.kpi-ok { border-color:#bbf7d0; background:linear-gradient(160deg,#f0fdf4,#fff); }

/* Chip de variación contra ayer: verde sube, rojo baja, gris sin cambio. */
.chip-var { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px;
  font:700 11.5px/1.35 'Inter'; white-space:nowrap; }
.chip-var.sube { background:#dcfce7; color:#15803d; }
.chip-var.baja { background:#fee2e2; color:#b91c1c; }
.chip-var.igual { background:#f1f5f9; color:#64748b; }
.chip-var.nada { background:#f8fafc; color:#94a3b8; font-weight:600; }

/* Gráfica Hoy vs Ayer: SVG plano, sin librerías. */
.dash-grafica { width:100%; height:auto; display:block; overflow:visible; }
.dash-leyenda { display:flex; gap:14px; font-size:12px; color:var(--gris); flex-wrap:wrap; }
.dash-leyenda i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }

/* Lista de pedidos pendientes de la tarjeta destacada. */
.pend-lista { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pend-fila { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; align-items:center;
  padding:10px 12px; border:1px solid var(--linea); border-radius:11px; background:#fff;
  text-decoration:none; color:inherit; transition:.14s; }
.pend-fila:hover { border-color:var(--primario); box-shadow:0 3px 10px rgba(15,23,42,.07); }
.pend-fila .pend-quien { font-weight:700; font-size:14px; }
.pend-fila .pend-que { font-size:12px; color:var(--gris); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pend-fila .pend-monto { font-weight:800; font-size:14.5px; text-align:right; white-space:nowrap; }
.pend-fila .pend-cuando { font-size:11.5px; color:var(--gris); text-align:right; }

/* ===== Fondo del botón: sólido o degradado (diseñador y tema) ===== */
.df-degradado { border:1px solid var(--linea); border-radius:12px; padding:12px 13px; margin:14px 0 12px; background:#fbfcfd; }
.df-deg-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.df-deg-cab b { font-size:13px; }
.df-deg-modos { display:flex; gap:6px; }
.df-deg-modo { display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid var(--linea);
  border-radius:999px; background:#fff; font:600 12.5px/1 'Inter'; cursor:pointer; transition:.12s; }
.df-deg-modo input { width:auto; margin:0; accent-color:var(--primario); }
.df-deg-modo.sel { border-color:var(--primario); background:#eef2ff; color:var(--primario); }
.df-deg-controles { margin-top:12px; display:flex; flex-direction:column; gap:11px; }
.df-deg-angulo { display:block; font-size:12.5px; color:var(--gris); font-weight:600; }
.df-deg-angulo input { width:100%; margin-top:5px; accent-color:var(--primario); }
.df-deg-angulo b { color:#0f172a; }
.df-deg-previa { display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:11px;
  color:#fff; font:800 14px/1 'Inter'; text-align:center; padding:12px; }
.df-deg-nota { font-size:11.5px; color:var(--gris); margin:0; }

/* ===== Ofertas de cantidad: badge de ahorro e imagen por nivel =====
   Ambos son opt-in por nivel; si la oferta no los usa, la tarjeta se ve igual
   que siempre (estos selectores no llegan a existir en el HTML). */
.oferta-op .oferta-badge { grid-column: 2; justify-self: start; align-self: center;
  background: var(--oc-acento, var(--acento)); color: #fff;
  font: 800 10.5px/1.35 'Inter'; letter-spacing: .3px; padding: 3px 9px; border-radius: 20px;
  white-space: nowrap; }
/* Con etiqueta Y badge, cada uno ocupa su propia línea y no se pisan. */
.oferta-op .oferta-tag + .oferta-badge { justify-self: start; }

/* La imagen ocupa una columna propia a la izquierda, entre el radio y el texto. */
.oferta-op.oferta-con-img { grid-template-columns: auto auto 1fr auto; }
.oferta-op .oferta-img { grid-row: span 2; width: 46px; height: 46px; object-fit: cover;
  border-radius: 9px; border: 1px solid var(--linea); background: #fff; }
.oc-plantilla-vertical .oferta-op.oferta-con-img { grid-template-columns: auto auto 1fr; }

/* ===== Editor de niveles: tipo de descuento, preselección, badge e imagen ===== */
.ocn-desc-caja { display: flex; align-items: center; gap: 4px; }
.ocn-desc-tipo { border: 1px solid var(--linea); border-radius: 8px; padding: 7px 4px; font-size: 12px; background: #fff; }
.ocn-pre { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid var(--linea); border-radius: 8px; cursor: pointer; }
.ocn-pre input { display: none; }
.ocn-pre span { color: #cbd5e1; font-size: 15px; font-weight: 800; }
.ocn-pre:has(input:checked) { border-color: var(--exito); background: #f0fdf4; }
.ocn-pre:has(input:checked) span { color: var(--exito); }
/* La caja avanzada ocupa toda la fila, debajo de los controles compactos. */
.ocn-mas { grid-column: 1 / -1; border: 1px dashed var(--linea); border-radius: 9px; padding: 6px 10px; }
.ocn-mas summary { cursor: pointer; font: 600 12px/1.6 'Inter'; color: var(--gris); }
.ocn-mas-cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }
.ocn-mas-cuerpo .ocn-badge { border: 1px solid var(--linea); border-radius: 8px; padding: 8px; font-size: 13px; }
.ocn-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.ocn-chk input { width: 16px; height: 16px; accent-color: var(--primario); }
.ocn-badge-cols { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocn-badge-deg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ocn-ang { font-size: 12px; color: var(--gris); font-weight: 600; }
.ocn-ang input { width: 120px; vertical-align: middle; margin-left: 6px; accent-color: var(--primario); }
.ocn-img-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ocn-img-pv { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); }
.ocn-img-btn { margin: 0; }

/* ===== Escanear boletas: subida masiva y emparejamiento ===== */
.bol-drop { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  border: 2px dashed var(--linea); border-radius: 14px; padding: 26px 18px; cursor: pointer;
  background: #fbfcfd; transition: .15s; }
.bol-drop:hover, .bol-drop.sobre { border-color: var(--primario); background: #eef2ff; }
.bol-drop b { font-size: 15px; }
.bol-drop span { font-size: 13px; color: var(--gris); }
.bol-drop small { font-size: 11.5px; color: var(--gris); }
.bol-link { background: none; border: 0; padding: 0; color: var(--primario); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; }
.bol-elegidas { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: var(--exito); }
#btnSubir { margin-top: 12px; }

.bol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.bol-item { border: 1px solid var(--linea); border-radius: 12px; padding: 10px; background: #fff; min-width: 0; }
.bol-foto { display: block; border-radius: 9px; overflow: hidden; background: #f1f5f9; margin-bottom: 9px; }
.bol-foto img { display: block; width: 100%; height: 150px; object-fit: cover; }
.bol-sel { width: 100%; border: 1px solid var(--linea); border-radius: 8px; padding: 8px; font-size: 12.5px; background: #fff; }
.bol-pie { margin-top: 6px; font-size: 11px; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bol-acciones { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.bol-borrar-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.bol-borrar-fila form { margin: 0; }

/* Boletas dentro del detalle del pedido */
.bol-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.bol-mini a { display: block; width: 78px; height: 78px; border-radius: 9px; overflow: hidden; border: 1px solid var(--linea); }
.bol-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Vista imprimible */
.bol-print-body { background: #f1f5f9; margin: 0; padding: 0 0 40px; }
.bol-print-barra { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px; background: #fff; border-bottom: 1px solid var(--linea); }
.bol-print-hoja { max-width: 800px; margin: 20px auto; background: #fff; padding: 26px; border-radius: 12px; box-shadow: var(--sombra); }
.bol-print-cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 2px solid #0f172a; padding-bottom: 12px; margin-bottom: 18px; }
.bol-print-cab h1 { font-size: 20px; margin: 0 0 6px; }
.bol-print-cab p { margin: 2px 0; font-size: 13.5px; }
.bol-print-tienda { font-weight: 800; font-size: 15px; }
.bol-print-fig { margin: 0 0 22px; }
.bol-print-fig img { width: 100%; height: auto; border: 1px solid var(--linea); border-radius: 8px; }
.bol-print-fig figcaption { font-size: 12px; color: var(--gris); margin-top: 6px; }
.bol-print-vacio { color: var(--gris); font-size: 14px; }
@media print {
  .bol-print-barra { display: none; }
  .bol-print-body { background: #fff; }
  .bol-print-hoja { box-shadow: none; margin: 0; max-width: none; padding: 0; border-radius: 0; }
  .bol-print-fig { break-inside: avoid; page-break-inside: avoid; }
}

/* Estado de lectura del código QR en cada boleta */
.bol-estado { margin-top: 6px; font: 600 11px/1.35 'Inter'; padding: 4px 7px; border-radius: 6px; }
.bol-estado[data-estado="orden"] { background: #f1f5f9; color: #64748b; }
.bol-estado[data-estado="leyendo"] { background: #eff6ff; color: #1d4ed8; }
.bol-estado[data-estado="qr"] { background: #dcfce7; color: #15803d; }
.bol-estado[data-estado="aviso"] { background: #fef3c7; color: #92400e; }
.bol-qr-aviso { margin: 0 0 14px; padding: 9px 12px; border-radius: 9px; background: #eef2ff;
  color: #3730a3; font-size: 12.5px; font-weight: 600; }

/* Aviso del cupón en el formulario de pedido */
.cf-dct-aviso { margin: 7px 0 0; font: 600 12.5px/1.4 'Inter'; padding: 7px 10px; border-radius: 8px; background: #f1f5f9; color: #475569; }
.cf-dct-aviso.bien { background: #dcfce7; color: #15803d; }
.cf-dct-aviso.mal { background: #fee2e2; color: #b91c1c; }

/* Panel de cupones */
.cup-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.cup-form .campo { margin: 0; }
.cup-form .campo small { font-weight: 400; color: var(--gris); }
.cup-activo { grid-column: 1 / -1; }
.cup-acciones { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.cup-fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cup-fila-acciones form { margin: 0; }

/* ===== Localizador de agencias Shalom (detalle del pedido) ===== */
.vc-shalom .sh-cli { font-size: 13px; color: var(--tinta2); margin-bottom: 10px; }
.vc-shalom .sh-mapa { width: 100%; height: 220px; border-radius: 10px; border: 1px solid var(--linea); margin-bottom: 12px; z-index: 0; background: #eef2f6; }
.vc-shalom .sh-lista { display: flex; flex-direction: column; gap: 8px; }
.vc-shalom .sh-ag { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.vc-shalom .sh-ag.principal { border-color: #a7f3d0; background: #f0fdf4; }
.vc-shalom .sh-pin { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 'Inter'; color: #fff; }
.vc-shalom .sh-pin-p { background: #059669; }
.vc-shalom .sh-pin-s { background: #f59e0b; }
.vc-shalom .sh-ag-info { flex: 1; min-width: 0; }
.vc-shalom .sh-ag-nom { font: 700 13px/1.25 'Inter'; color: var(--tinta); }
.vc-shalom .sh-ag-sub { font-size: 11.5px; color: var(--gris); }
.vc-shalom .sh-km { font: 800 13px/1 'Inter'; color: var(--tinta); white-space: nowrap; }
.vc-shalom .sh-ag.principal .sh-km { color: #047857; }
.vc-shalom .sh-wa { margin-top: 12px; width: 100%; justify-content: center; }
.vc-shalom .sh-nota { font-size: 11px; color: var(--gris); margin: 10px 0 0; }
.vc-shalom .sh-vacio { font-size: 13px; color: var(--gris); margin: 0; }
/* Marcador numérico del mapa (divIcon) */
.sh-dot span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 800 12px/1 'Inter'; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

/* ==========================================================
   PANEL DEL MENTOR (/admin) — códigos de invitación, visitas y alumnos
   Todo con prefijo .adm- para no rozar ninguna otra pantalla.
   ========================================================== */
.adm-main { max-width: 1180px; }

/* ---- Cabecera con la marca ---- */
.adm-hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, #4f46e5, #7c3aed 45%, #c026d3);
  border-radius: 20px; padding: 26px 28px; margin-bottom: 26px;
  box-shadow: 0 10px 30px rgba(109, 40, 217, .28);
}
.adm-hero::after {
  content: ''; position: absolute; inset: auto -60px -120px auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%); pointer-events: none;
}
.adm-hero h1 { font: 800 27px/1.15 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; margin: 0 0 6px; }
.adm-hero p { margin: 0; font-size: 14px; opacity: .92; max-width: 60ch; }
.adm-hero-fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; position: relative; z-index: 1; }
.adm-hoy {
  display: flex; align-items: baseline; gap: 8px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28); border-radius: 14px; padding: 12px 18px;
}
.adm-hoy b { font: 800 26px/1 'Sora', 'Inter', sans-serif; }
.adm-hoy span { font-size: 12.5px; opacity: .92; }

/* ---- KPIs ---- */
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.adm-kpi { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 16px 18px; box-shadow: var(--sombra); }
.adm-kpi .v { font: 800 26px/1.1 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; }
.adm-kpi .n { font-size: 12.5px; color: var(--gris); margin-top: 3px; }
.adm-kpi.acento .v { color: var(--primario); }

/* ---- Tarjeta / sección ---- */
.adm-caja { background: #fff; border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); margin-bottom: 26px; overflow: hidden; }
.adm-caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid var(--linea); }
.adm-caja-cab h2 { font: 700 17px/1.2 'Sora', 'Inter', sans-serif; margin: 0; letter-spacing: -.01em; }
.adm-caja-cab p { margin: 4px 0 0; font-size: 13px; color: var(--gris); }
.adm-caja-cuerpo { padding: 22px; }
.adm-caja-cuerpo + .adm-caja-cuerpo { border-top: 1px solid var(--linea); }

/* ---- Elegir el tipo de código ---- */
.adm-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-tipo { position: relative; display: block; cursor: pointer; }
.adm-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.adm-tipo-caja {
  height: 100%; border: 1.5px solid var(--linea); border-radius: 14px; padding: 14px 16px;
  background: #fff; transition: .16s; display: flex; flex-direction: column; gap: 4px;
}
.adm-tipo:hover .adm-tipo-caja { border-color: #c7d2fe; transform: translateY(-1px); }
.adm-tipo input:checked + .adm-tipo-caja { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(99, 102, 241, .16); background: #fbfaff; }
.adm-tipo input:focus-visible + .adm-tipo-caja { outline: 2px solid var(--primario); outline-offset: 2px; }
.adm-tipo-t { font: 700 14.5px/1.2 'Inter'; display: flex; align-items: center; gap: 7px; }
.adm-tipo-d { font-size: 12.5px; color: var(--gris); line-height: 1.45; }

/* ---- Fila de controles ---- */
.adm-controles { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.adm-campo { display: flex; flex-direction: column; gap: 5px; }
/* `display:flex` gana al display:none implícito de [hidden]: sin esto, los
   campos que solo aplican a un beneficio (días, %) se quedaban a la vista. */
.adm-campo[hidden] { display: none; }
.adm-campo label { font: 600 12px/1.3 'Inter'; color: var(--tinta2); }
.adm-campo input, .adm-campo select {
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; font: 500 14px/1.2 'Inter';
  color: var(--tinta); background: #fff; outline: none; transition: border .15s, box-shadow .15s;
}
.adm-campo input:focus, .adm-campo select:focus { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.adm-campo .pista { font-size: 11.5px; color: var(--gris); }

/* ---- Códigos recién generados ---- */
.adm-nuevos { margin-top: 18px; border: 1.5px dashed #c4b5fd; background: #faf7ff; border-radius: 14px; padding: 16px 18px; }
.adm-nuevos h4 { margin: 0 0 4px; font: 700 14px/1.3 'Inter'; }
.adm-nuevos .sub { font-size: 12.5px; color: var(--gris); margin: 0 0 12px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 210px; overflow-y: auto; }
.adm-chip {
  font: 700 13px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .06em;
  background: #fff; border: 1px solid #ddd6fe; color: #5b21b6; border-radius: 9px;
  padding: 9px 12px; cursor: pointer; transition: .14s;
}
.adm-chip:hover { border-color: var(--primario); background: #f5f3ff; }
.adm-chip.copiado { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }

/* ---- Lista de códigos ---- */
.adm-lista { display: flex; flex-direction: column; }
.adm-fila {
  display: grid; grid-template-columns: minmax(150px, 190px) 1fr auto; gap: 14px; align-items: center;
  padding: 13px 4px; border-bottom: 1px solid var(--linea);
}
.adm-fila:last-child { border-bottom: none; }
.adm-cod {
  font: 700 14px/1 ui-monospace, 'SFMono-Regular', Menlo, monospace; letter-spacing: .05em;
  color: var(--tinta); background: #f8fafc; border: 1px solid var(--linea); border-radius: 9px;
  padding: 9px 10px; cursor: pointer; text-align: center; transition: .14s; white-space: nowrap;
}
.adm-cod:hover { border-color: var(--primario); color: var(--primario); }
.adm-cod.copiado { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.adm-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12.5px; color: var(--gris); min-width: 0; }
.adm-meta .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.adm-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.adm-btn {
  border: 1px solid var(--linea); background: #fff; color: var(--tinta2); border-radius: 9px;
  padding: 7px 11px; font: 600 12.5px/1 'Inter'; cursor: pointer; transition: .15s; white-space: nowrap;
}
.adm-btn:hover { border-color: var(--primario); color: var(--primario); }
.adm-btn.peligro:hover { border-color: #fca5a5; color: var(--peligro); background: #fef2f2; }
.adm-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Insignias (tipo de código, estado, suscripción) */
.adm-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 700 11.5px/1.4 'Inter'; border: 1px solid transparent; white-space: nowrap; }
.adm-tag.verde  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.adm-tag.morado { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.adm-tag.ambar  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.adm-tag.azul   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.adm-tag.rojo   { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.adm-tag.gris   { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Paginación */
.adm-pag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; flex-wrap: wrap; }
.adm-pag .info { font-size: 12.5px; color: var(--gris); }
.adm-pag .botones { display: flex; gap: 6px; }

/* Vacíos y cargando */
.adm-vacio { text-align: center; padding: 30px 10px; color: var(--gris); font-size: 13.5px; }
.adm-vacio .ico { font-size: 32px; display: block; margin-bottom: 6px; }
.adm-cargando { padding: 26px; text-align: center; color: var(--gris); font-size: 13px; }

/* ---- Desplegables (canjeados, historial de visitas) ---- */
.adm-desp { border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.adm-desp + .adm-desp { margin-top: 12px; }
.adm-desp > summary {
  list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; gap: 10px;
  font: 600 14.5px/1.3 'Inter'; user-select: none; transition: background .15s;
}
.adm-desp > summary::-webkit-details-marker { display: none; }
.adm-desp > summary:hover { background: #f8fafc; }
.adm-desp > summary .flecha { transition: transform .2s; color: var(--gris); font-size: 12px; }
.adm-desp[open] > summary { border-bottom: 1px solid var(--linea); }
.adm-desp[open] > summary .flecha { transform: rotate(90deg); }
.adm-desp > summary .cuenta { margin-left: auto; font: 600 12px/1 'Inter'; color: var(--gris); }
.adm-desp-cuerpo { padding: 18px; }

/* ---- Historial de visitas por día ---- */
.adm-dias { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.adm-dia { display: grid; grid-template-columns: 118px 1fr 96px; gap: 12px; align-items: center; padding: 5px 0; }
.adm-dia .f { font-size: 12.5px; color: var(--tinta2); font-variant-numeric: tabular-nums; }
.adm-dia .barra { height: 9px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.adm-dia .barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #a855f7); min-width: 2px; }
.adm-dia .n { font-size: 12.5px; text-align: right; color: var(--gris); font-variant-numeric: tabular-nums; }
.adm-dia .n b { color: var(--tinta); }
.adm-dia.cero .f, .adm-dia.cero .n { opacity: .5; }
.adm-dia.hoy .f { font-weight: 700; color: var(--primario); }

/* ---- Tabla de alumnos ---- */
/* Con 7 columnas, el relleno de la tabla general dejaba el botón de la derecha
   fuera de la pantalla en portátiles: aquí va más justo. */
.adm-main .tabla th, .adm-main .tabla td { padding: 12px 12px; }
.adm-alumno { display: flex; align-items: center; gap: 11px; min-width: 0; }
.adm-ini {
  width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font: 700 13px/1 'Inter'; color: #fff; background: linear-gradient(135deg, #6366f1, #a855f7);
}
.adm-alumno .nom { font-weight: 700; font-size: 14px; white-space: nowrap; }
/* El correo no puede empujar la tabla hasta esconder el botón de la derecha:
   si es largo, se recorta con puntos suspensivos (el completo está en el title). */
.adm-alumno .mail { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 180px; }
/* El nombre de la tienda tampoco se parte en dos renglones: si no cabe, la
   tabla ya se desplaza en horizontal. */
.adm-tienda { color: var(--primario); font-weight: 600; white-space: nowrap; }
.adm-sel { padding: 7px 9px; border: 1px solid var(--linea); border-radius: 9px; font: 600 12.5px 'Inter'; cursor: pointer; background: #fff; }
.adm-sel:focus { border-color: var(--primario); outline: none; }
.adm-hoy-cel { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.adm-hoy-cel b { font-size: 14px; }

/* ---- Aviso flotante ---- */
.adm-aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px);
  background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 12px;
  font: 600 13.5px/1.3 'Inter'; box-shadow: 0 12px 30px rgba(15,23,42,.28); z-index: 90;
  opacity: 0; transition: .22s; pointer-events: none; max-width: 90vw; text-align: center;
}
.adm-aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.adm-aviso.malo { background: #b91c1c; }

/* ---- Mensajes de resultado de una acción ---- */
.adm-mensaje {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px;
  font-size: 13.5px; margin-bottom: 22px; border: 1px solid transparent; line-height: 1.5;
}
.adm-mensaje.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.adm-mensaje.mal { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---- Dos columnas que se apilan solas ---- */
.adm-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 26px; align-items: start; }
.adm-dos > .adm-caja { margin-bottom: 0; }
.adm-dos + .adm-caja, .adm-dos + .adm-dos { margin-top: 26px; }

/* ---- Gráficos de barras diminutos ---- */
.adm-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; }
.adm-grafico .cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.adm-grafico .t { font: 600 12.5px/1 'Inter'; color: var(--gris); }
.adm-grafico .v { font: 800 20px/1 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; }
.adm-grafico .barras, .adm-mini-barras {
  display: flex; align-items: flex-end; gap: 2px; height: 62px;
  border-bottom: 1px solid var(--linea); padding-bottom: 1px;
}
.adm-mini-barras { height: 54px; gap: 3px; }
.adm-barra { flex: 1; min-width: 2px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #818cf8, #6366f1); transition: opacity .15s; }
.adm-barra:hover { opacity: .65; }

/* ---- Panorama de suscripciones ---- */
.adm-susc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-susc-item {
  display: block; border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px;
  transition: .16s; background: #fff;
}
.adm-susc-item:hover { border-color: var(--primario); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,.12); }
.adm-susc-item .n { display: block; font: 800 24px/1.1 'Sora', 'Inter', sans-serif; letter-spacing: -.02em; }
.adm-susc-item .t { display: block; font: 700 13px/1.3 'Inter'; margin-top: 4px; }
.adm-susc-item .d { display: block; font-size: 11.5px; color: var(--gris); margin-top: 2px; }
.adm-nota-mrr {
  margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--linea); border-radius: 12px;
  background: #f8fafc; font-size: 12.5px; color: var(--gris); line-height: 1.5;
}
.adm-nota-mrr b { display: block; color: var(--tinta2); font-size: 13px; margin-bottom: 2px; }

/* ---- Barra de progreso ---- */
.adm-progreso { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.adm-progreso i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #a855f7); min-width: 3px; }

/* ---- Filtros en forma de chip ---- */
.adm-filtros { display: flex; flex-wrap: wrap; gap: 7px; }
.adm-chip-filtro {
  border: 1px solid var(--linea); background: #fff; color: var(--tinta2); border-radius: 999px;
  padding: 7px 14px; font: 600 12.5px/1 'Inter'; cursor: pointer; transition: .15s;
}
.adm-chip-filtro:hover { border-color: var(--primario); color: var(--primario); }
.adm-chip-filtro.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---- Lista de alumnos ---- */
.adm-tabla-alumnos { display: flex; flex-direction: column; }
.adm-alumno-cab, .adm-alumno-fila {
  display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(120px, 1fr) 96px minmax(150px, 1fr) minmax(140px, 1fr) 128px;
  gap: 12px; align-items: center; padding: 12px 22px;
}
.adm-alumno-cab {
  font: 700 11.5px/1.4 'Inter'; letter-spacing: .06em; text-transform: uppercase; color: var(--gris);
  background: #f8fafc; border-bottom: 1px solid var(--linea);
}
.adm-alumno-fila { border-bottom: 1px solid var(--linea); cursor: pointer; transition: background .14s; }
.adm-alumno-fila:last-child { border-bottom: none; }
.adm-alumno-fila:hover { background: #fbfaff; }
.adm-alumno-fila:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.adm-alumno-fila .cel { min-width: 0; font-size: 13px; }
.adm-alumno-fila .cel.numeros { color: var(--gris); font-size: 12.5px; }
.adm-alumno-fila .cel.acciones { text-align: right; }
.adm-alumno-fila .adm-tag + .adm-tag { margin-top: 4px; }
.adm-ini.apagado { background: linear-gradient(135deg, #94a3b8, #64748b); }

/* ---- Ficha del alumno ---- */
.adm-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 20px; }
.adm-datos > div { min-width: 0; }
.adm-datos .k { display: block; font: 600 11.5px/1.4 'Inter'; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.adm-datos .v { display: block; font-size: 13.5px; margin-top: 2px; word-break: break-word; }
.adm-datos code { font: 700 12.5px ui-monospace, Menlo, monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }
.adm-acciones-bloque { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.adm-acciones-bloque form { margin: 0; }
.adm-form-beneficio { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linea); }
.adm-pista { font-size: 12px; color: var(--gris); margin: 10px 0 0; }
.adm-caja.adm-peligro { border-color: #fecaca; }
.adm-caja.adm-peligro .adm-caja-cab { background: #fef2f2; border-bottom-color: #fecaca; }
.adm-caja.adm-peligro h2 { color: #b91c1c; }
.adm-lista-borrar { margin: 8px 0 14px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; }
.adm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tinta2); cursor: pointer; line-height: 1.5; }
.adm-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--primario); flex: none; }
.adm-tabs-enlace { display: flex; gap: 6px; }
.adm-tabs-enlace .adm-btn.activo { background: var(--tinta); border-color: var(--tinta); color: #fff; }

/* ---- Registro de auditoría ---- */
.adm-fila.adm-log { grid-template-columns: minmax(170px, 210px) 1fr 132px; align-items: flex-start; }
.adm-log-cuando { font-size: 12px; color: var(--gris); text-align: right; line-height: 1.5; }
.adm-log-cuando .quien { font-size: 11.5px; opacity: .8; }

/* ---- Ventanas de confirmación ---- */
.adm-modal {
  position: fixed; inset: 0; z-index: 120; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px);
}
.adm-modal[hidden] { display: none; }
.adm-modal-caja {
  background: #fff; border-radius: 18px; padding: 26px; width: min(520px, 100%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35); max-height: 92vh; overflow-y: auto;
}
.adm-modal-caja h3 { font: 700 19px/1.25 'Sora', 'Inter', sans-serif; margin: 0 0 8px; }
.adm-modal-caja p { font-size: 13.5px; color: var(--tinta2); margin: 0 0 12px; line-height: 1.6; }
.adm-modal-caja code { font: 700 12.5px ui-monospace, Menlo, monospace; background: #f1f5f9; padding: 2px 6px; border-radius: 6px; }
.adm-modal-pie { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
body.sin-scroll { overflow: hidden; }

/* ---- "Estás viendo como…" (panel del alumno, prestado a un admin) ---- */
.vy-impersonando {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 8px 18px; background: linear-gradient(120deg, #b45309, #d97706);
  color: #fff; font: 600 13px/1.4 'Inter'; flex-wrap: wrap;
  box-shadow: 0 2px 12px rgba(180, 83, 9, .35);
}
.vy-impersonando .txt { flex: 1; min-width: 200px; }
.vy-impersonando .ico { font-size: 16px; }
.vy-impersonando form { margin: 0; }
.vy-impersonando button {
  background: #fff; color: #b45309; border: none; border-radius: 9px; padding: 8px 14px;
  font: 700 12.5px/1 'Inter'; cursor: pointer; transition: .15s; white-space: nowrap;
}
.vy-impersonando button:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }

/* ---- Anuncio del mentor en el panel del alumno ---- */
.vy-anuncio {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; font-size: 13.5px;
  line-height: 1.55; margin-bottom: 20px;
}
.vy-anuncio.aviso { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.vy-anuncio.fiesta { border-color: #ddd6fe; background: #f5f3ff; color: #5b21b6; }
.vy-anuncio .ico { font-size: 18px; line-height: 1.3; }
.vy-anuncio .txt { flex: 1; min-width: 0; white-space: pre-wrap; }
.vy-anuncio .cerrar {
  border: none; background: transparent; color: inherit; opacity: .5; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.vy-anuncio .cerrar:hover { opacity: 1; background: rgba(0, 0, 0, .06); }

@media (max-width: 900px) {
  .adm-alumno-cab { display: none; }
  .adm-alumno .mail { max-width: none; }
  .adm-alumno-fila {
    grid-template-columns: 1fr; gap: 8px; padding: 16px;
    border-bottom: 8px solid #f6f7fb;
  }
  .adm-alumno-fila .cel.acciones { text-align: left; }
}

@media (max-width: 760px) {
  .adm-hero { padding: 20px; border-radius: 16px; }
  .adm-hero h1 { font-size: 22px; }
  .adm-dos { grid-template-columns: 1fr; gap: 20px; }
  .adm-fila.adm-log { grid-template-columns: 1fr; }
  .adm-log-cuando { text-align: left; }
  .adm-modal-caja { padding: 20px; }
  .adm-caja-cuerpo { padding: 16px; }
  .adm-caja-cab { padding: 16px; }
  .adm-fila { grid-template-columns: 1fr; gap: 9px; padding: 14px 4px; }
  .adm-cod { justify-self: start; }
  .adm-acciones { justify-content: flex-start; }
  .adm-dia { grid-template-columns: 96px 1fr 78px; }
  .adm-campo { flex: 1 1 130px; }
}
.pl-pie-top{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--linea)}

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================

/* ============================================================
   BASE "LIMPIA" DE LOS TEMAS DE GALERÍA  (bloque aditivo)
   ============================================================
   Va al final de styles.css a propósito: todas las reglas de aquí
   redeclaran propiedades que ya existen más arriba, pero pasándolas por
   una variable cuyo VALOR POR DEFECTO ES EL DE HOY. Una tienda que no
   defina esas variables se ve exactamente igual que antes de este bloque
   — mismo degradado, mismos tamaños, mismas tarjetas.

   Solo cambian las tiendas cuyo tema pide la base limpia: estiloTema()
   emite el juego de variables completo cuando la apariencia trae
   base:'limpio'. Es la forma de tener temas tipo Dawn (blanco, aire,
   tipografía fina, tarjeta sin marco) sin tocar ni una regla existente
   ni el storefront de las tiendas que ya están vendiendo.
   ============================================================ */

/* ---- Ritmo vertical: el aire es la mitad del trabajo ---- */
.tienda-body .sec { padding-top: var(--t-sec-y, 44px); padding-bottom: var(--t-sec-y, 44px); }
.tienda-body .sec-envoltura[data-pad="amplio"] > section { padding-top: var(--t-sec-y-amplio, 60px); padding-bottom: var(--t-sec-y-amplio, 60px); }

/* ---- Portada ---- */
.tienda-body .sec-hero {
  background: var(--t-hero-bg, linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 60%, #000)));
  color: var(--t-hero-fg, var(--hero-txt, #fff));
  padding: var(--t-hero-y, 72px) 20px;
  border-bottom: var(--t-hero-borde, 0);
}
.tienda-body .sec-hero.con-imagen { background: #111 center/cover no-repeat; color: var(--hero-txt, #fff); }
.tienda-body .sec-hero h1 {
  font-size: var(--t-h1, clamp(30px, 6vw, 52px));
  font-weight: var(--t-h1-peso, 800);
  letter-spacing: var(--t-h1-track, -.02em);
  line-height: var(--t-h1-alto, 1.1);
}
.tienda-body .sec-hero p {
  font-size: var(--t-lead, clamp(15px, 2.4vw, 19px));
  line-height: var(--t-lead-alto, 1.5);
  opacity: var(--t-lead-op, .92);
  max-width: var(--t-lead-ancho, 540px);
}
.tienda-body .sec-hero .btn-hero {
  background: var(--t-btnh-bg, #fff);
  color: var(--t-btnh-fg, #0f172a);
  border: var(--t-btnh-borde, 0);
  border-radius: var(--t-btnh-radio, 11px);
  font-weight: var(--t-btnh-peso, 800);
  font-size: var(--t-btnh-tam, 15px);
  letter-spacing: var(--t-btnh-track, 0);
  text-transform: var(--t-btnh-caja, none);
  padding: var(--t-btnh-pad, 15px 34px);
}
.tienda-body .sec-hero .btn-hero:hover { box-shadow: var(--t-btnh-sombra, 0 10px 26px rgba(0,0,0,.28)); }

/* ---- Títulos de sección ---- */
.tienda-body .titulo-seccion,
.tienda-body .sec-testimonios h2,
.tienda-body .sec-faq h2,
.tienda-body .sec-ti h2 {
  font-size: var(--t-h2, clamp(22px, 3.4vw, 30px));
  font-weight: var(--t-h2-peso, 700);
  letter-spacing: var(--t-h2-track, -.02em);
}
.tienda-body .sec-galeria .titulo-seccion,
.tienda-body .sec-testimonios h2,
.tienda-body .sec-faq h2 { margin-bottom: var(--t-h2-abajo, 26px); }

/* ---- Franjas de color: en la base limpia dejan de ser franjas ---- */
.tienda-body .sec-banner {
  background: var(--t-franja-bg, var(--acento));
  color: var(--t-franja-fg, #fff);
  font-weight: var(--t-franja-peso, 800);
  font-size: var(--t-franja-tam, clamp(15px, 2.6vw, 19px));
  letter-spacing: var(--t-franja-track, 0);
  border-top: var(--t-franja-borde, 0);
  border-bottom: var(--t-franja-borde, 0);
  padding: var(--t-franja-y, 22px) 20px;
}
.tienda-body .sec-bannercta:not(.con-imagen),
.tienda-body .sec-oferta-timer {
  background: var(--t-cta-bg, linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #000)));
  color: var(--t-cta-fg, #fff);
  border-top: var(--t-cta-borde, 0);
  border-bottom: var(--t-cta-borde, 0);
}
.tienda-body .sec-bannercta h2,
.tienda-body .sec-oferta-timer h2 {
  font-size: var(--t-h2, clamp(22px, 4vw, 34px));
  font-weight: var(--t-h2-peso, 800);
}

/* ---- Tarjeta de producto: Dawn no lleva marco ni botón por tarjeta ---- */
.tienda-body .prod-pub {
  border: var(--t-card-borde, 1px solid var(--linea));
  border-radius: var(--t-card-radio, var(--radio));
  background: var(--t-card-bg, #fff);
}
.tienda-body .prod-pub:hover {
  box-shadow: var(--t-card-sombra, var(--sombra));
  transform: var(--t-card-mueve, translateY(-2px));
}
.tienda-body .prod-pub .foto { background: var(--t-card-foto-bg, #f1f5f9) center/cover no-repeat; }
.tienda-body .prod-pub .cuerpo { padding: var(--t-card-pad, 13px 14px 15px); gap: var(--t-card-gap, 7px); text-align: var(--t-card-al, left); }
.tienda-body .prod-pub .precios { justify-content: var(--t-card-just, flex-start); }
.tienda-body .prod-pub .nombre { font-size: var(--t-card-nombre, 14.5px); font-weight: var(--t-card-nombre-peso, 600); }
.tienda-body .prod-pub .cta {
  background: var(--t-card-cta-bg, var(--acento));
  color: var(--t-card-cta-fg, #fff);
  border: var(--t-card-cta-borde, 0);
  display: var(--t-card-cta-ver, block);
  font-weight: var(--t-card-cta-peso, 700);
  text-transform: var(--t-card-cta-caja, none);
  letter-spacing: var(--t-card-cta-track, 0);
}
.tienda-body .grid-tienda { gap: var(--t-grid-gap, 16px); }

/* ---- Bloques de contenido ---- */
.tienda-body .beneficio {
  border: var(--t-benef-borde, 1px solid var(--linea));
  border-radius: var(--t-benef-radio, var(--radio));
  background: var(--t-benef-bg, #fff);
  padding: var(--t-benef-pad, 26px 18px);
  text-align: var(--t-benef-al, center);
}
.tienda-body .beneficio .icono { font-size: var(--t-benef-icono, 34px); margin-bottom: var(--t-benef-icono-abajo, 10px); }
.tienda-body .beneficio h3 { font-size: var(--t-benef-tit, 16px); font-weight: var(--t-benef-tit-peso, 700); }
.tienda-body .testimonio {
  border: var(--t-test-borde, 1px solid var(--linea));
  border-radius: var(--t-test-radio, var(--radio));
  box-shadow: var(--t-test-sombra, var(--sombra));
  background: var(--t-test-bg, #fff);
  padding: var(--t-test-pad, 22px);
}
.tienda-body .testimonio .texto { font-style: var(--t-test-cursiva, italic); font-size: var(--t-test-tam, 14.5px); }
.tienda-body .faq-item { border-bottom: var(--t-faq-linea, 1px solid var(--linea)); }
.tienda-body .sec-ti p { font-size: var(--t-cuerpo, inherit); line-height: var(--t-cuerpo-alto, 1.6); }
.tienda-body .la-texto p { font-size: var(--t-cuerpo, inherit); line-height: var(--t-cuerpo-alto, 1.6); }

/* ---- Portada tipo Dawn: el texto vive dentro del ancho de página ---- */
.tienda-body .sec-hero .contenido { max-width: var(--t-hero-ancho, 720px); }
.tienda-body .sec-hero.con-imagen .velo { opacity: var(--t-hero-velo, .52) !important; }

/* ---- Hueco de imagen vacío: sobrio, sin dibujos ---- */
.tienda-body .ti-img.hueco-vacio,
.tienda-body .gl-item.hueco-vacio {
  background: var(--t-hueco-bg, #fafafa);
  border: 1px dashed var(--t-hueco-linea, #d4d4d8);
}

/* ---- Detalle de acabado: lo que separa un tema de pago de una plantilla ---- */
/* Alineación de los títulos de sección: centrada, a la izquierda con filete
   (editorial) o en versalitas pequeñas, según la base. */
.tienda-body .titulo-seccion,
.tienda-body .sec-testimonios h2,
.tienda-body .sec-faq h2 { text-align: var(--t-h2-al, center); }
.tienda-body .sec-ti h2 { text-align: left; }

/* Rejillas gobernadas por el tema, no por un mínimo fijo para todos */
.tienda-body .grid-tienda { grid-template-columns: repeat(auto-fill, minmax(var(--t-grid-min, 170px), 1fr)); }
/* En telefono manda la rejilla de siempre: dos por fila en telefono. Sin esto,
   la regla de arriba (mas especifica) dejaba un solo producto por fila. */
@media (max-width: 640px) {
  .tienda-body .grid-tienda { grid-template-columns: repeat(2, 1fr); gap: var(--t-grid-gap, 12px); }
}
/* Columnas del multicolumn tal como las trae cada tema real (2, 3 o 4) */
.tienda-body .sec-beneficios { grid-template-columns: repeat(auto-fit, minmax(var(--t-benef-min, 200px), 1fr)); }
/* Se usa auto-fit con el ancho minimo medido de cada tema en vez de forzar el
   numero de columnas: con menos items que columnas quedaria una fila coja, que
   es exactamente el defecto que delata a una plantilla. El ancho minimo por
   acabado (200 a 300px) ya produce el reparto de columnas del tema real. */
.tienda-body .grid-testimonios { grid-template-columns: repeat(auto-fit, minmax(var(--t-test-min, 240px), 1fr)); }

/* Foto de producto: radio propio y un acercamiento discreto al pasar el ratón.
   La transición vive en la imagen, no en la tarjeta: mover la tarjeta entera
   es el gesto que delata a las plantillas. */
.tienda-body .prod-pub .foto { border-radius: var(--t-card-foto-radio, 0); overflow: hidden; }
.tienda-body .prod-pub .foto-img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.tienda-body .prod-pub:hover .foto-img { transform: var(--t-card-img-hover, none); }
.tienda-body .prod-pub .cta { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.tienda-body .sec-hero .btn-hero { transition: opacity .18s ease, transform .18s ease; }
.tienda-body .sec-hero .btn-hero:hover { opacity: .88; transform: none; }

/* Galería vacía: sin borde, el propio hueco ya trae su plano de color */
.tienda-body .sec-galeria .gl-item { border: var(--t-galeria-borde, 1px solid var(--linea)); border-radius: var(--t-card-foto-radio, 12px); }

/* Un título de sección vacío no debe dejar un hueco fantasma */
.tienda-body .titulo-seccion:empty { display: none; }

/* ============================================================
   HEADER Y FOOTER — mismo marcado, acabado del tema
   ============================================================
   El marcado de header-tienda.ejs y footer-tienda.ejs es compartido por las
   tiendas vivas, así que NO se toca. Todo lo de aquí es CSS con los valores
   de hoy por defecto: una tienda sin base limpia se ve exactamente igual.

   Con esto se replica del header real de Shopify: filete fino en vez de
   sombra, marca en peso normal (no 800), navegación en 400 con más aire,
   el subtítulo de ciudad oculto (Dawn no tiene nada ahí) y tres
   disposiciones — marca a la izquierda, centrada o apilada sobre el menú. */

.tienda-body .tienda-header {
  background: var(--t-head-bg, color-mix(in srgb, var(--t-fondo, #fff) 94%, transparent));
  backdrop-filter: var(--t-head-blur, blur(8px));
  border-bottom: var(--t-head-borde, 1px solid var(--linea));
}
.tienda-body .tienda-header .interior {
  padding: var(--t-head-y, 12px) 20px;
  gap: var(--t-head-gap, 12px);
  justify-content: var(--t-head-just, flex-start);
}
.tienda-body .tienda-header .nombre {
  font-size: var(--t-head-marca-tam, 19px);
  font-weight: var(--t-head-marca-peso, 800);
  letter-spacing: var(--t-head-marca-track, -.02em);
  text-transform: var(--t-head-marca-caja, none);
  font-family: var(--fuente-tit), var(--fuente), sans-serif;
}
.tienda-body .tienda-header .ciudad { display: var(--t-head-ciudad, block); }
.tienda-body .tienda-header .th-menu { gap: var(--t-head-nav-gap, 20px); }
.tienda-body .tienda-header .th-menu a {
  font-size: var(--t-head-nav-tam, 14px);
  font-weight: var(--t-head-nav-peso, 600);
  letter-spacing: var(--t-head-nav-track, 0);
  text-transform: var(--t-head-nav-caja, none);
  opacity: var(--t-head-nav-op, .88);
}
.tienda-body .tienda-header .th-menu a:hover { color: var(--t-head-nav-hover, var(--acento)); }
/* El botón de WhatsApp pasa a ser un enlace discreto, como el icono de
   carrito de Dawn: presente pero sin gritar. */
.tienda-body .tienda-header .wa {
  background: var(--t-head-wa-bg, var(--verde, #16a34a));
  color: var(--t-head-wa-fg, #fff);
  border: var(--t-head-wa-borde, 0);
  border-radius: var(--t-head-wa-radio, 10px);
  font-size: var(--t-head-wa-tam, 13px);
  font-weight: var(--t-head-wa-peso, 700);
  letter-spacing: var(--t-head-wa-track, 0);
  padding: var(--t-head-wa-pad, 9px 14px);
  box-shadow: none;
}

/* Disposicion del header por variables, no por una clase en <body>: el
   marcado compartido no se toca. Permite marca a la izquierda (Dawn),
   centrada en la barra (Studio) o apilada sobre el menu (Craft). */
.tienda-body .tienda-header .interior {
  display: var(--t-head-display, flex);
  grid-template-columns: var(--t-head-cols, none);
  justify-items: var(--t-head-items, stretch);
  text-align: var(--t-head-al, left);
}
.tienda-body .tienda-header .th-marca { margin: var(--t-head-marca-margen, 0); text-align: var(--t-head-al, left); }
.tienda-body .tienda-header .th-menu { margin-left: var(--t-head-nav-margen, auto); }
.tienda-body .tienda-header .wa { margin-left: var(--t-head-wa-margen, auto); }
.tienda-body .tienda-header.con-menu .wa { margin-left: var(--t-head-wa-margen2, 16px); }

/* ---- Footer: columnas, filetes finos y copyright centrado ---- */
.tienda-body .tienda-pie,
.tienda-body .pie-plus {
  background: var(--t-pie-bg, #f8fafc);
  border-top: var(--t-pie-borde, 1px solid var(--linea));
  padding-top: var(--t-pie-y, 26px);
}
.tienda-body .pie-plus .pie-cols { grid-template-columns: repeat(auto-fit, minmax(var(--t-pie-col-min, 130px), 1fr)); gap: var(--t-pie-col-gap, 22px); }
.tienda-body .pie-plus .pie-col h4 {
  font-size: var(--t-pie-h4-tam, 12px);
  letter-spacing: var(--t-pie-h4-track, .06em);
  text-transform: var(--t-pie-h4-caja, none);
  opacity: var(--t-pie-h4-op, .6);
  margin-bottom: var(--t-pie-h4-abajo, 10px);
}
.tienda-body .pie-plus .pie-col a,
.tienda-body .pie-plus .pie-col span { font-size: var(--t-pie-a-tam, 13.5px); opacity: var(--t-pie-a-op, .9); }
.tienda-body .pie-plus .pie-col a { transition: opacity .15s ease; }
.tienda-body .pie-plus .pie-col a:hover { opacity: 1; }
.tienda-body .pie-plus .pie-legal { font-size: var(--t-pie-legal-tam, 12.5px); opacity: var(--t-pie-legal-op, .7); }
.tienda-body .pie-plus .pie-nombre b { font-family: var(--fuente-tit), var(--fuente), sans-serif; font-weight: var(--t-pie-marca-peso, 700); }

/* ---- Icono de carrito del header ---- */
/* Vive en el header de siempre y abre el mismo cajon que el boton flotante.
   Solo aparece en las paginas que incluyen el cajon. */
.tienda-header .th-carrito {
  background: none; border: 0; padding: 6px; cursor: pointer; position: relative;
  color: var(--th-txt, inherit); display: inline-flex; align-items: center;
  line-height: 0; border-radius: 8px; transition: opacity .15s ease;
}
.tienda-header .th-carrito:hover { opacity: .65; }
.tienda-header .th-carrito { margin-left: auto; }
.tienda-header.con-menu .th-carrito { margin-left: 14px; }
/* Con el carrito delante, el boton de WhatsApp deja de empujar a la derecha */
.tienda-header .th-carrito + .wa { margin-left: 12px; }
.tienda-header .th-carrito-n {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--acento); color: #fff;
  font: 700 10.5px/17px 'Inter', sans-serif; text-align: center;
}
.tienda-header .th-carrito-n[data-vacio="1"] { display: none; }

/* ============================================================
   CIERRE DE BRECHAS  (valores medidos del CSS real de cada demo)
   ============================================================ */

/* Precio — real: .price { font-size:1.2rem (12px); color:rgba(fg,.7) }
   El nuestro heredaba el tamano del cuerpo y el color del acento. */
.tienda-body .prod-pub .precio {
  font-size: var(--t-precio-tam, inherit);
  font-weight: var(--t-precio-peso, inherit);
  color: var(--t-precio-color, inherit);
  opacity: var(--t-precio-op, 1);
}
.tienda-body .prod-pub .antes { font-size: var(--t-precio-tam, 13px); opacity: var(--t-precio-antes-op, .55); }
.tienda-body .prod-pub .precios { gap: var(--t-precio-gap, 8px); }

/* Texto de la tarjeta — real: .card-information { letter-spacing:.07rem } en
   Sense, Craft y Refresh; Dawn y Studio no lo llevan. */
.tienda-body .prod-pub .cuerpo { letter-spacing: var(--t-card-track, 0); }

/* Boton — real: .button { min-height:4.5rem (45px); font-size:1.5rem;
   letter-spacing:.1rem; line-height:calc(1 + .2/scale) } */
.tienda-body .sec-hero .btn-hero,
.tienda-body .sec-bannercta .btn-hero,
.tienda-body .sec-oferta-timer .btn-hero {
  min-height: var(--t-btnh-alto, auto);
  line-height: var(--t-btnh-alto-linea, normal);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Insignia de descuento — real: .badge { font-size:1.2rem; letter-spacing:.1rem;
   padding:.5rem 1.3rem .6rem; border:1px solid; border-radius:var(--badge-radius) } */
.tienda-body .prod-pub .desc-tag {
  font-size: var(--t-badge-tam, 12px);
  letter-spacing: var(--t-badge-track, 0);
  padding: var(--t-badge-pad, 4px 8px);
  border-radius: var(--t-badge-radio, 6px);
  font-weight: var(--t-badge-peso, 700);
}

/* Navegacion del header — real: .header__menu-item { padding:1.2rem;
   color:rgba(fg,.75) } y .header { padding:10px 3rem } */
.tienda-body .tienda-header .th-menu a { padding: var(--t-head-nav-pad, 0); }

/* Encabezado de columna del footer — real: .footer-block__heading
   { font-size: calc(escala * 1.6rem) } = 16px x escala, en la fuente de
   titulares y SIN versalitas. El nuestro eran micro-etiquetas de 12px. */
.tienda-body .pie-plus .pie-col h4 { font-family: var(--fuente-tit), var(--fuente), sans-serif; }

/* ---- La marca del panel lleva al inicio ---- */
/* El logo del sidebar era texto muerto; ahora es un enlace. Hereda el color y
   no lleva subrayado, asi que el sidebar se ve exactamente igual que antes. */
.panel-logo-link { display: inline-block; color: inherit; text-decoration: none; cursor: pointer; transition: opacity .15s ease; }
.panel-logo-link:hover { opacity: .82; }
.panel-logo-link:focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; border-radius: 4px; }

/* ---- Segunda tanda de brechas (auditados los 10 acabados) ---- */
/* .card-information real: color rgba(fg,.75). El nombre del producto no va a
   color pleno en ningun tema de Shopify. El interlineado que declara esa
   regla (0.9) es del CONTENEDOR: aplicarlo al titulo, que envuelve a dos
   lineas, lo apretaria. Por eso solo se toma el color. */
.tienda-body .prod-pub .nombre { color: var(--t-card-color, inherit); opacity: var(--t-card-op, 1); }
/* .card__content real: padding 1rem = 10px, igual en los diez */
/* (se aplica via --t-card-pad desde la base) */

/* ============================================================
   BUSCADOR DE LA TIENDA
   Lupa en el header + panel desplegable + pagina de resultados.
   Todo hereda los colores del tema (--th-txt, --acento, --linea),
   asi que se ve distinto en cada uno de los 20 temas sin tocarlos.
   ============================================================ */

.tienda-header .th-buscar {
  background: none; border: 0; padding: 6px; cursor: pointer;
  color: var(--th-txt, inherit); display: inline-flex; align-items: center;
  line-height: 0; border-radius: 8px; transition: opacity .15s ease;
  text-decoration: none; margin-left: auto;
}
.tienda-header .th-buscar:hover { opacity: .65; }
/* Con lupa delante, el carrito ya no es quien empuja a la derecha */
.tienda-header .th-buscar ~ .th-carrito { margin-left: 4px; }
.tienda-header.con-menu .th-buscar { margin-left: 14px; }

/* Panel: cae debajo del header, a lo ancho del contenido del tema */
.tienda-header .th-buscador {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--t-fondo, #fff);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .07);
  padding: 14px 20px 16px;
}
.th-buscador-caja {
  max-width: var(--t-ancho, 1020px); margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1.5px solid var(--th-txt, currentColor);
  padding-bottom: 8px;
}
.th-buscador-lupa { flex: 0 0 auto; opacity: .6; color: var(--th-txt, inherit); }
.th-buscador-caja input[type="search"] {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  font: 400 16px/1.4 var(--fuente), 'Inter', system-ui, sans-serif;
  color: var(--th-txt, inherit); padding: 6px 0;
}
.th-buscador-caja input[type="search"]::placeholder { color: var(--th-txt, var(--gris)); opacity: .5; }
.th-buscador-caja input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.th-buscador-ir {
  flex: 0 0 auto; border: 0; cursor: pointer; border-radius: var(--t-btn-radio, 10px);
  background: var(--acento); color: var(--t-btn-txt, #fff);
  font: 600 13px/1 var(--fuente), 'Inter', sans-serif; padding: 10px 16px;
}
.th-buscador-x {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--th-txt, inherit); opacity: .5; padding: 0 2px;
}
.th-buscador-x:hover { opacity: 1; }

/* Sugerencias */
.th-sugerencias { max-width: var(--t-ancho, 1020px); margin: 10px auto 0; }
.th-sugerencias a {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
  text-decoration: none; color: var(--th-txt, inherit); border-radius: 10px;
}
.th-sugerencias a:hover, .th-sugerencias a[data-sel="1"] { background: color-mix(in srgb, var(--th-txt, #000) 6%, transparent); }
.th-sugerencias img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--t-hueco-bg, #f1f1ef); }
.th-sug-sinfoto { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--t-hueco-bg, #f1f1ef); opacity: .5; flex: 0 0 auto; }
.th-sug-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-sug-nom { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-sug-pre { font-size: 12.5px; opacity: .7; }
.th-sug-pre s { opacity: .6; margin-left: 4px; }
.th-sug-todos { justify-content: center; font-size: 13px; font-weight: 600; opacity: .8; }
.th-sug-vacio { padding: 14px 10px; font-size: 14px; opacity: .6; text-align: center; }

/* Pagina de resultados */
.sec-buscar .buscar-form {
  display: flex; gap: 10px; max-width: 560px; margin: 0 auto 6px;
}
.sec-buscar .buscar-form input[type="search"] {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: var(--t-btn-radio, 10px);
  border: 1px solid var(--linea); background: var(--t-fondo, #fff); color: inherit;
  font: 400 15px/1.3 var(--fuente), 'Inter', system-ui, sans-serif;
}
.sec-buscar .buscar-cuenta { text-align: center; font-size: 13.5px; color: var(--gris); margin: 14px 0 22px; }
.sec-buscar .buscar-vacio { text-align: center; padding: 26px 20px 40px; color: var(--gris); display: grid; gap: 12px; justify-items: center; }

@media (max-width: 640px) {
  .tienda-header .th-buscador { padding: 12px 14px 14px; }
  .th-buscador-ir { display: none; }   /* en movil basta con Enter */
}

/* ============================================================
   SEGUNDA FOTO AL PASAR EL MOUSE
   Lo que hacen los temas reales: no hay zoom, hay CAMBIO de foto.
   Solo aparece si el producto tiene 2+ fotos en su galeria; con una
   sola, la tarjeta se queda quieta. En pantallas tactiles no se
   activa (no hay "pasar por encima" que valga).
   ============================================================ */
.tienda-body .prod-pub .foto-img2 {
  opacity: 0;
  transition: opacity var(--t-card-img2-t, .35s) ease;
  pointer-events: none;
}
.tienda-body .prod-pub:hover .foto-img2,
.tienda-body .prod-pub:focus-visible .foto-img2 { opacity: 1; }

@media (hover: none) {
  .tienda-body .prod-pub .foto-img2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tienda-body .prod-pub .foto-img2 { transition: none; }
}

/* ============================================================
   AGREGAR RAPIDO DESDE LA TARJETA
   La tarjeta vive ahora dentro de .prod-celda (un <button> no puede
   ir dentro de un <a>). La celda ocupa el sitio que ocupaba la
   tarjeta en la rejilla, asi que la rejilla no cambia.
   ============================================================ */
.grid-tienda > .prod-celda {
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .18s;
}
.grid-tienda > .prod-celda > .prod-pub { flex: 1 1 auto; }

/* El "levantarse" al pasar el mouse pasa a la celda, para que la
   tarjeta y su boton se muevan juntos y no se despeguen. */
.tienda-body .grid-tienda > .prod-celda:hover > .prod-pub { transform: none; }
.tienda-body .grid-tienda > .prod-celda:hover { transform: var(--t-card-mueve, translateY(-2px)); }

.prod-rapido {
  display: block; width: 100%; margin-top: 8px; cursor: pointer;
  box-sizing: border-box; text-align: center; text-decoration: none;
  border: 1px solid var(--t-btn-borde-color, var(--acento));
  border-radius: var(--t-btn-radio, 9px);
  background: transparent; color: var(--acento);
  font: 600 13px/1 var(--fuente), 'Inter', system-ui, sans-serif;
  letter-spacing: var(--t-btn-track, 0);
  padding: 11px 10px;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.prod-rapido:hover { background: var(--acento); color: var(--t-btn-txt, #fff); }
.prod-rapido:disabled { opacity: .5; cursor: default; }
.prod-rapido:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Si el vendedor decidio ocultar el CTA de la tarjeta, el agregar rapido
   tambien se va: es su decision de tener una rejilla limpia. */
.tienda-body[data-prodcta="ocultar"] .prod-rapido { display: none; }

@media (max-width: 640px) {
  .prod-rapido { padding: 8px 8px; font-size: 13px; }
}

/* ============================================================
   SELLOS DE FORMAS DE PAGO EN EL PIE
   Solo lo que la tienda acepta de verdad. Sin logotipos ajenos:
   el nombre en texto es exacto y no se apropia de ninguna marca.
   ============================================================ */
.pie-pagos {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; align-items: center;
  margin: 18px 0 4px;
}
.tienda-pie.pie-plus .pie-pagos { justify-content: flex-start; margin: 4px 0 16px; }

.pie-pago {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid currentColor; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; line-height: 1;
  opacity: .72;
}
.pie-pago svg { flex: 0 0 auto; opacity: .9; }

@media (max-width: 640px) {
  .pie-pago { font-size: 12px; padding: 6px 9px; }
}

/* ============================================================
   BOLETIN
   Formulario del pie (tienda) + pantalla de la lista (panel).
   ============================================================ */
.pie-boletin { display: block; margin-top: 4px; max-width: 380px; }
.tienda-pie:not(.pie-plus) .pie-boletin { margin: 18px auto 0; }
.pie-boletin label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.pie-boletin-fila { display: flex; gap: 8px; }
.pie-boletin input[type="email"] {
  flex: 1 1 auto; min-width: 0; padding: 10px 12px;
  border: 1px solid currentColor; border-radius: var(--t-btn-radio, 9px);
  background: transparent; color: inherit; font-size: 14px;
}
.pie-boletin input[type="email"]::placeholder { color: currentColor; opacity: .45; }
.pie-boletin button {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: var(--t-btn-radio, 9px);
  background: var(--acento); color: var(--t-btn-txt, #fff);
  font: 600 13px/1 var(--fuente), 'Inter', sans-serif; padding: 11px 14px;
}
.pie-boletin small { display: block; margin-top: 7px; font-size: 11.5px; opacity: .6; line-height: 1.5; }

.sec-boletin-aviso .boletin-aviso {
  max-width: 560px; margin: 30px auto 50px; text-align: center;
  display: grid; gap: 12px; justify-items: center;
}
.sec-boletin-aviso .boletin-aviso h1 { font-size: clamp(22px, 3.4vw, 30px); }
.sec-boletin-aviso .boletin-aviso p { font-size: 15px; line-height: 1.7; color: var(--tinta2); margin: 0; }
.sec-boletin-aviso .boletin-detalle { font-size: 13px; opacity: .65; }

/* ---- Panel ---- */
.bol-cifras { display: flex; flex-wrap: wrap; gap: 10px; }
.bol-cifra {
  flex: 1 1 120px; text-decoration: none; color: inherit;
  border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px;
  display: grid; gap: 2px;
}
.bol-cifra.on { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento) inset; }
.bol-cifra b { font-size: 22px; line-height: 1.1; }
.bol-cifra span { font-size: 12.5px; color: var(--gris); }
.bol-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bol-tabla th, .bol-tabla td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.bol-tabla th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.bol-estado { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; }
.bol-confirmado { color: #15803d; }
.bol-pendiente { color: #b45309; }
.bol-baja { color: #64748b; }

/* El pie personalizado reparte sus columnas en una rejilla; el formulario no
   puede quedarse dentro de una de ellas (en telefono medía 157px y el campo
   del correo se quedaba en 41px, inservible). Ocupa la fila entera. */
.tienda-pie.pie-plus .pie-cols > .pie-boletin { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .pie-boletin { max-width: none; }
  .pie-boletin-fila { flex-wrap: wrap; }
  .pie-boletin input[type="email"] { flex: 1 1 190px; }
  .pie-boletin button { flex: 1 1 120px; }
}

/* ============================================================
   PULIDO VISUAL  (revision con capturas de los 20 temas)
   Todo con valores por defecto = lo de hoy, para que las tiendas
   vivas no cambien salvo donde el arreglo es para todos.
   ============================================================ */

/* ---- Fila de acciones del header ----
   La lupa, el carrito y WhatsApp van juntos. En los temas de marca
   centrada el header se dispone en rejilla y, sin este envoltorio,
   cada boton caia en su propia fila: el header ocupaba cinco filas. */
.tienda-header .th-acciones {   /* un-solo-auto */
  display: flex; align-items: center; gap: 6px;
  position: static;
  /* Con menu, el margen automatico es el del menu y los botones van detras:
     asi el bloque menu+botones queda pegado a la derecha, como estaba. Sin
     menu, el automatico lo toma este grupo. */
  margin-left: 0;
}
.tienda-header:not(.con-menu) .th-acciones { margin-left: auto; }
.tienda-body .tienda-header .interior[style*="grid"] .th-acciones,
.tienda-header .th-acciones { min-width: 0; }
.tienda-header .th-acciones .th-buscar,
.tienda-header .th-acciones .th-carrito { margin-left: 0; }
.tienda-header .th-acciones .wa { margin-left: 6px; }
/* En rejilla (marca centrada) la fila de acciones se centra como las demas */
.tienda-body .tienda-header .interior { align-items: center; }

/* ---- Hero sin foto: banda tipografica, no un rectangulo pelado ----
   Antes el hero llevaba el placeholder de foto como fondo y el icono de
   "aqui va una imagen" se veia detras del titular. */
.tienda-body .sec-hero:not(.con-imagen) {
  background: var(--t-hero-bg, color-mix(in srgb, var(--t-texto, #111) 4%, var(--t-fondo, #fff)));
  border-bottom: 1px solid color-mix(in srgb, var(--t-texto, #111) 8%, transparent);
}
.tienda-body .sec-hero:not(.con-imagen) .contenido { max-width: 780px; }
.tienda-body .sec-hero:not(.con-imagen) h1 { margin-bottom: 10px; }
.tienda-body .sec-hero:not(.con-imagen) p { max-width: 56ch; margin-left: auto; margin-right: auto; }
.tienda-body .sec-hero.hero-al-izq:not(.con-imagen) p { margin-left: 0; }

/* ---- Agregar rapido: accion secundaria, no un segundo boton ----
   Dos botones del mismo peso por tarjeta se veian recargados. */
.prod-rapido {
  display: var(--t-rapido-ver, block);
  width: 100%; box-sizing: border-box;
  background: none; padding: 8px 10px; margin-top: 8px;
  border: 1px solid rgba(128,128,128,.42);
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--t-btn-radio, 8px);
  color: var(--t-card-color, inherit);
  font: 600 13px/1.2 var(--fuente), 'Inter', system-ui, sans-serif;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.prod-rapido:hover { background: var(--acento); border-color: var(--acento); color: var(--t-btn-txt, #fff); }

/* ---- El cuerpo de texto, en color de texto ----
   Varios temas escribian parrafos enteros en el color de acento (dorado,
   verde, naranja): poco contraste y parecian enlaces. */
.tienda-body .sec-texto-ancho p,
.tienda-body .sec-beneficios .beneficio p,
.tienda-body .sec-detalle p,
.tienda-body .sec-autoridad p {
  color: var(--t-cuerpo-color, var(--tinta2));
}

/* ---- Aire coherente entre secciones ----
   Con menos secciones, las que quedan necesitan respirar igual. */
.tienda-body .sec + .sec { padding-top: var(--t-sec-entre, 0); }

/* ---- hero-aire: el hero tipografico necesita respirar ----
   Sin foto, el bloque quedaba apretado contra el header y el parrafo se
   partia en dos lineas cortisimas. */
.tienda-body .sec-hero:not(.con-imagen) {
  padding-top: var(--t-hero-y, 62px);
  padding-bottom: var(--t-hero-y, 62px);
}
.tienda-body .sec-hero:not(.con-imagen) .contenido { width: 100%; }
.tienda-body .sec-hero:not(.con-imagen) p {
  font-size: 15.5px; line-height: 1.65; max-width: 60ch;
}
@media (max-width: 640px) {
  .tienda-body .sec-hero:not(.con-imagen) { padding-top: 42px; padding-bottom: 42px; }
}

/* ---- header-centrado ----
   Colocacion en la rejilla del header de marca centrada. Fuera de una
   rejilla (los temas de marca a la izquierda, y las tiendas vivas) estas
   propiedades se ignoran solas, asi que no hace falta condicionarlas. */
.tienda-body .tienda-header .th-marca { grid-column: 2; grid-row: 1; }
.tienda-body .tienda-header .th-acciones { grid-column: 3; grid-row: 1; justify-self: end; }
.tienda-body .tienda-header .th-menu { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.tienda-body .tienda-header img.logo { grid-column: 1; grid-row: 1; justify-self: start; }

/* El grupo de acciones reproduce el aire que habia antes entre los iconos
   (16px en escritorio, 14px en telefono), para que en las tiendas vivas no se
   mueva ni un pixel. */
.tienda-header .th-acciones { gap: 16px; }
.tienda-header .th-acciones .wa { margin-left: 0; }
@media (max-width: 640px) { .tienda-header .th-acciones { gap: 14px; } }
/* En telefono el menu baja a su propia fila, asi que el margen automatico que
   empuja los botones a la derecha tiene que tomarlo el grupo. */
@media (max-width: 640px) { .tienda-header.con-menu .th-acciones { margin-left: auto; } }

/* ---- medida-de-linea ----
   Un parrafo de 120 caracteres por linea no se lee: se sigue con el dedo. Los
   bloques de texto ancho se quedan en una medida comoda y centrada. */
.tienda-body .la-texto { max-width: 68ch; margin-left: auto; margin-right: auto; }
.tienda-body .la-texto p { color: var(--t-cuerpo-color, var(--tinta2)); line-height: 1.7; }
.tienda-body .sec-beneficios .beneficio p { color: var(--t-cuerpo-color, var(--tinta2)); }

/* ---- columnas-del-tema ----
   Si el tema dice cuantas columnas quiere, se le hace caso en escritorio. Sin
   la variable —todas las tiendas de hoy— no existe la regla y manda la
   rejilla automatica de siempre. */
@supports (grid-template-columns: repeat(3, minmax(0, 1fr))) {
  @media (min-width: 900px) {
    /* La variable viaja en el style del propio <body>. */
    body.tienda-body[style*="--t-grid-cols"] .grid-tienda { grid-template-columns: repeat(var(--t-grid-cols), minmax(0, 1fr)); }
  }
}

/* ---- hero-vacio-cuidado ----
   Solo para los temas de la galeria (llevan la variable). El hero sin foto se
   alinea con el resto de la pagina y se apoya en una banda apenas entintada
   con un filete abajo: asi se lee como una decision de diseno y no como un
   hueco sin rellenar. */
body.tienda-body[style*="--t-hero-vacio"] .sec-hero:not(.con-imagen) {
  padding-left: 0; padding-right: 0;
  background: color-mix(in srgb, var(--t-texto, #111) 4%, var(--t-fondo, #fff));
  border-top: 1px solid color-mix(in srgb, var(--t-texto, #111) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--t-texto, #111) 8%, transparent);
}
body.tienda-body[style*="--t-hero-vacio"] .sec-hero:not(.con-imagen) .contenido {
  max-width: var(--t-ancho, 1020px);
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
  box-sizing: border-box;
}
body.tienda-body[style*="--t-hero-vacio"] .sec-hero.hero-al-centro:not(.con-imagen) .contenido { text-align: center; }
@media (max-width: 640px) {
  body.tienda-body[style*="--t-hero-vacio"] .sec-hero:not(.con-imagen) .contenido { padding-left: 14px; padding-right: 14px; }
}

/* ---- Arreglo: el modal de resenas cuelga de <body>, fuera de .sec-resenas,
   asi que no heredaba --rev-acento y el boton "Enviar mi resena" salia
   invisible (texto blanco sobre fondo transparente en tarjeta blanca).
   Se hereda de --acento igual que hace la linea 349, sin fijar el color de
   ninguna tienda concreta. ---- */
.rev-modal { --rev-acento: var(--acento, #4f46e5); }
/* ============================================================================
   ZOOM DE FOTOS DE PRODUCTO  ·  global, todas las tiendas y las 20 plantillas
   ----------------------------------------------------------------------------
   Escritorio: lupa que sigue al cursor SOBRE la propia foto.
   Movil:      un toque abre el visor a pantalla completa, con pellizco.

   No descarga ni una imagen nueva: la lupa y el visor reutilizan el MISMO src
   que el navegador ya tiene en cache. Coste en datos: 0 KB.
   Sin colores de ninguna tienda: todo sale de var(--acento).
   ========================================================================== */

.galeria { position: relative; }

/* Capa que calca exactamente la caja 1:1 del carrusel. Va sobre .galeria y no
   dentro del carrusel, que hace scroll horizontal y se la llevaria consigo.
   pointer-events:none: el raton tiene que seguir llegando al carrusel. */
.g-capa {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1;
  z-index: 3; pointer-events: none;
  border-radius: var(--radio); overflow: hidden;
}

.g-lupa {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .15s ease-out; background: #f1f5f9;
}
.g-lupa.viendo { opacity: 1; }
/* object-fit:cover identico al del slide: la lupa amplia lo que ya se ve, sin
   saltos de encuadre al entrar el cursor. */
.g-lupa img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  will-change: transform;
}

/* Pista de que la foto se amplia. Sin ella el comprador no lo descubre. */
.g-pista {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px 6px 9px; border-radius: 99px;
  background: rgba(15, 23, 42, .62); color: #fff;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  opacity: .95; transition: opacity .18s;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* Icono en SVG y no emoji: el emoji no se dibuja en todas las fuentes. */
.g-pista::before {
  content: ''; width: 13px; height: 13px; flex: 0 0 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.galeria.g-ampliando .g-pista { opacity: 0; }
/* Si la foto no tiene pixeles para ampliar, no se promete zoom. */
.galeria.g-sin-zoom .g-pista { display: none; }

.g-carrusel { cursor: zoom-in; }
.galeria.g-sin-zoom .g-carrusel { cursor: default; }

/* --------------------------------- VISOR (movil) ------------------------- */
/* Cuelga de <body> para que ningun ancestro con transform u overflow lo corte. */
.g-visor {
  position: fixed; inset: 0; z-index: 200;
  background: #0b1220;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease-out;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.g-visor.viendo { opacity: 1; }

.g-visor-lienzo {
  width: 100%; height: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Nos quedamos con todos los gestos: el pellizco lo calculamos nosotros y
     asi no compite con el zoom de la pagina ni con el swipe del carrusel. */
  touch-action: none; -webkit-user-select: none; user-select: none;
}
/* contain y no cover: en el visor la foto se ve ENTERA, sin el recorte
   cuadrado del carrusel. Para muchos productos esto ya es media venta. */
.g-visor-lienzo img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  will-change: transform; -webkit-user-drag: none;
}

.g-visor-x {
  position: absolute; z-index: 2;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .16); color: #fff;
  font: 700 19px/1 'Inter', system-ui, sans-serif; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.g-visor-x:active { background: rgba(255, 255, 255, .3); }

.g-visor-num {
  position: absolute; z-index: 2;
  top: calc(20px + env(safe-area-inset-top, 0px)); left: 16px;
  color: #fff; font: 700 13px/1 'Inter', system-ui, sans-serif;
  opacity: .8; letter-spacing: .3px;
}

.g-visor-ayuda {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  color: #fff; font: 600 12.5px/1 'Inter', system-ui, sans-serif;
  background: rgba(255, 255, 255, .14); padding: 8px 14px; border-radius: 99px;
  opacity: .9; transition: opacity .3s; pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  white-space: nowrap;
}
.g-visor.g-tocado .g-visor-ayuda { opacity: 0; }

.g-visor-puntos {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 7px;
}
.g-visor-puntos i {
  width: 7px; height: 7px; border-radius: 99px;
  background: rgba(255, 255, 255, .35); transition: .25s;
}
.g-visor-puntos i.activa { background: var(--acento, #4f46e5); width: 20px; }

body.g-visor-abierto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .g-lupa, .g-visor, .g-visor-ayuda { transition: none; }
}

/* ===== R20-FIDELIDAD ===== */
.tienda-body .prod-pub .foto,.prod-pub .foto,.card-prod .foto{flex:0 0 auto}
.tienda-body{line-height:var(--t-cuerpo-alto,1.5);letter-spacing:var(--t-cuerpo-track,normal)}
.tienda-body .prod-pub .nombre{font-family:var(--t-card-nombre-fuente,var(--fuente)),'Inter',system-ui,sans-serif}
body.tienda-body .prod-pub .precio,body.tienda-body .compra .precio,body.tienda-body .barra-movil .precio{font-family:var(--t-card-precio-fuente,var(--fuente-tit)),'Inter',system-ui,sans-serif}


/* VY-SECCION-COLUMNAS-INICIO
   La cantidad elegida en el editor manda solo en esta sección. */
.grid-tienda.grid-tienda-controlada,
.tienda-body .grid-tienda.grid-tienda-controlada {
  grid-template-columns: repeat(var(--vy-grid-m, 2), minmax(0, 1fr));
}
.grid-tienda.grid-tienda-controlada > .prod-celda { min-width: 0; }
@media (min-width: 750px) {
  .grid-tienda.grid-tienda-controlada,
  .tienda-body .grid-tienda.grid-tienda-controlada {
    grid-template-columns: repeat(var(--vy-grid-d, 4), minmax(0, 1fr));
  }
}
/* VY-SECCION-COLUMNAS-FIN */


/* VY-EDITOR-GRID-DISCOVERY-INICIO */
.ed-grid-pill{
  display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;
  margin-top:4px;padding:3px 7px;border:1px solid #c7d2fe;border-radius:999px;
  background:#eef2ff;color:#4f46e5;font:700 9.5px/1.1 'Inter',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ed-grid-editor{
  margin:12px 0 16px;padding:13px;border:1.5px solid #c7d2fe;border-radius:12px;
  background:linear-gradient(145deg,#f8faff 0%,#f5f3ff 100%);
  box-shadow:0 5px 16px rgba(79,70,229,.08);
}
.ed-grid-editor-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ed-grid-editor-icon{
  display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;
  border-radius:9px;background:#4f46e5;color:#fff;font-size:18px;box-shadow:0 4px 10px rgba(79,70,229,.22)
}
.ed-grid-editor-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.ed-grid-editor-head strong{color:#1e1b4b;font-size:13px;line-height:1.2}
.ed-grid-editor-head small{margin-top:2px;color:#6b7280;font-size:10.5px;line-height:1.25}
.ed-grid-editor-devices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-grid-device{display:flex!important;flex-direction:column;gap:6px;margin:0!important;color:#374151!important;font-size:10.5px!important;font-weight:700!important}
.ed-grid-device>span{white-space:nowrap}
.ed-grid-device select{width:100%;height:38px;border-color:#c7d2fe;background:#fff;font-weight:700;color:#312e81}
.ed-grid-save-note{margin:10px 0 0;color:#64748b;font-size:10.5px;line-height:1.35}
.ed-grid-save-note b{color:#4338ca}
@media(max-width:360px){.ed-grid-editor-devices{grid-template-columns:1fr}.ed-grid-pill{font-size:9px}}
/* VY-EDITOR-GRID-DISCOVERY-FIN */


/* VY-EDITOR-BUTTON-CONTROLS · controles claros, compactos y manual-save */
.ed-cta-global,.ed-cta-editor{border:1px solid #dbe3f0;border-radius:14px;background:linear-gradient(180deg,#fff,#f8faff);box-shadow:0 8px 24px rgba(15,23,42,.055);margin:14px 0;overflow:hidden}
.ed-cta-global{padding:14px}.ed-cta-global-head,.ed-cta-editor>summary{display:flex;align-items:center;gap:10px}.ed-cta-global-head{padding-bottom:12px;border-bottom:1px solid #e7edf6;margin-bottom:12px}.ed-cta-global-head>span,.ed-cta-editor-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#6366f1,#d946ef);color:#fff;font-weight:800}.ed-cta-global-head div,.ed-cta-editor>summary span:last-child{display:flex;flex-direction:column;gap:2px}.ed-cta-global-head small,.ed-cta-editor>summary small{font-size:11.5px;color:#64748b;font-weight:500}.ed-cta-editor>summary{list-style:none;cursor:pointer;padding:13px 14px}.ed-cta-editor>summary::-webkit-details-marker{display:none}.ed-cta-editor>summary:after{content:'⌄';margin-left:auto;color:#64748b;font-size:17px}.ed-cta-editor[open]>summary:after{transform:rotate(180deg)}.ed-cta-editor-body{border-top:1px solid #e7edf6;padding:12px}.ed-cta-block{padding:11px;border:1px solid #e5eaf3;border-radius:11px;background:#fff;margin-bottom:10px}.ed-cta-block-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px}.ed-cta-block-head span{font-size:11px;color:#64748b}.ed-cta-block .campo:last-child,.ed-cta-global .campo:last-child{margin-bottom:0}.ed-cta-global input[type=text],.ed-cta-editor input[type=text]{font-weight:600}.ed-cta-global input[type=text]:focus,.ed-cta-editor input[type=text]:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.11)}
/* Sobrescritura explícita por sección; heredar conserva el comportamiento histórico. */
.tienda-body .sec-envoltura.cta-seccion-ocultar .prod-pub .cta{display:none!important}.tienda-body .sec-envoltura.cta-seccion-mostrar .prod-pub .cta{display:flex!important}.tienda-body .sec-envoltura.rapido-seccion-ocultar .prod-rapido{display:none!important}.tienda-body .sec-envoltura.rapido-seccion-mostrar .prod-rapido{display:block!important}