/* vemix.css — lo que la tienda de Vemix añade al diseño de la tienda de
   GECOTEL (chrome.css, tienda.css y las hojas de cada página): la marca
   dinámica (logo o inicial), las tostadas, los errores de los formularios,
   la diapositiva clara, la franja de marcas, la vista previa y detalles de la
   ficha y el catálogo. Colores, siempre por variable del tema (--marca-*). */

/* ---------------------------------------------------------------- marca */
.vx-saltar { position: absolute; left: 12px; top: 8px; z-index: 2000; padding: 8px 14px; border-radius: 8px; background: var(--marca-acento); color: var(--marca-sobre-acento); font-weight: 700; }
.vx-brand__logo { display: block; height: 44px; width: auto; max-width: 190px; object-fit: contain; }
.vx-brand__mark--inicial { color: var(--marca-sobre-acento); font: 800 1.25rem 'Manrope', system-ui, sans-serif; }
.vx-iconbtn__inicial { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--marca-primario); color: var(--marca-sobre-primario); font-size: .8rem; font-weight: 800; }
.vx-foot__logoimg { display: block; max-height: 52px; max-width: 200px; object-fit: contain; }
.vx-foot__mark--inicial { display: inline-grid; place-items: center; color: var(--marca-sobre-acento); background: var(--marca-acento); font: 800 1.2rem 'Manrope', system-ui, sans-serif; }
.vx-foot__empresalogo { display: block; max-height: 40px; max-width: 160px; object-fit: contain; margin-bottom: 10px; background: var(--marca-superficie); border-radius: 8px; padding: 4px 8px; }
.vx-foot__contact small { opacity: .75; }

/* ---------------------------------------------------------------- avisos */
.vx-tostadas { position: fixed; z-index: 3000; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 32px)); }
.vx-tostada { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--marca-primario); color: var(--marca-sobre-primario);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--marca-primario) 70%, transparent); font-size: .9rem; animation: vx-entra .25s ease; }
.vx-tostada i { color: var(--marca-realce); }
.vx-tostada span { flex: 1; }
.vx-tostada a { flex: none; padding: 6px 10px; border-radius: 8px; background: var(--marca-acento); color: var(--marca-sobre-acento); font-weight: 700; text-decoration: none; font-size: .82rem; }
.vx-tostada--error { background: #b42318; color: #fff; }
.vx-tostada--error i { color: #fff; }
@keyframes vx-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-tostada { animation: none; } }

.is-mal { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .15) !important; }
.vx-form__error { display: block; margin-top: 4px; color: #b42318; font-size: .82rem; font-weight: 600; }

.vx-vista-previa { position: sticky; top: 0; z-index: 1050; padding: 8px 16px; text-align: center; background: var(--marca-acento); color: var(--marca-sobre-acento); font-weight: 700; font-size: .88rem; }

.vx-subir { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--marca-acento); color: var(--marca-sobre-acento); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--marca-primario) 60%, transparent); }
.vx-tostadas:not(:empty) ~ .vx-subir, .vx-subir[hidden] { display: none; }

/* ------------------------------------------------------- franja de ventajas */
.vx-garantias { background: var(--marca-superficie); border-top: 1px solid var(--marca-linea); }
.vx-garantias__inner { max-width: 1320px; margin: 0 auto; padding: 22px clamp(1rem, 4vw, 2rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.vx-garantia { display: flex; gap: 12px; align-items: flex-start; }
.vx-garantia i { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-size: 1.05rem; }
.vx-garantia b { display: block; color: var(--marca-texto); font-family: 'Manrope', system-ui, sans-serif; }
.vx-garantia span { color: var(--marca-tenue); font-size: .88rem; }

/* ---------------------------------------------------------------- portada */
.pt-slide--clara .pt-slide__texto { background: color-mix(in srgb, var(--marca-superficie) 88%, transparent); color: var(--marca-texto); border-color: color-mix(in srgb, var(--marca-texto) 8%, transparent); }
.pt-slide--clara .pt-slide__titulo { color: var(--marca-texto); }
.pt-slide__lead { color: color-mix(in srgb, var(--marca-sobre-primario) 86%, transparent); }
.pt-slide--clara .pt-slide__lead { color: var(--marca-texto-2); }
.pt-slide--defecto { background: linear-gradient(135deg, var(--marca-primario), var(--marca-primario-3)); }
.pt-marcas__fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pt-marca { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 16px; border: 1px solid var(--marca-linea);
  border-radius: 16px; background: var(--marca-superficie); color: var(--marca-texto); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.pt-marca:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--marca-primario) 45%, transparent); color: var(--marca-texto); }
.pt-marca img { max-width: 100%; max-height: 52px; object-fit: contain; }
.pt-marca b { font: 800 1.05rem 'Manrope', system-ui, sans-serif; }
.pt-marca small { color: var(--marca-tenue); font-size: .78rem; }

/* ---------------------------------------------------------------- catálogo */
.cat-franja__total { color: var(--marca-tenue); font-size: .9rem; }
.cat-franja__descripcion { margin: 6px 0 0; max-width: 70ch; color: var(--marca-tenue); }
.vx-marca-cabecera { display: flex; align-items: center; gap: 18px; margin: 12px 0 4px; }
.vx-marca-cabecera img { max-height: 64px; max-width: 160px; object-fit: contain; padding: 8px 12px; border: 1px solid var(--marca-linea); border-radius: 12px; background: var(--marca-superficie); }
.vx-marca-cabecera p { margin: 4px 0 0; color: var(--marca-tenue); max-width: 70ch; }
.vx-pcard__desde { color: var(--marca-tenue); font-size: .78rem; }
a.vx-pcard__add, a.vx-mini__add { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; }

/* ---------------------------------------------------------------- ficha */
.pd-resumen { margin: 6px 0 12px; color: var(--marca-texto-2); }
.pd-marca img { max-height: 22px; max-width: 70px; object-fit: contain; margin-right: 6px; vertical-align: -5px; }
.pd-sinfoto { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 3rem; }
.pd-precio__aviso.is-bien { color: #157a45; }
.pd-precio__aviso.is-pocas { color: #b45309; }
.pd-precio__aviso.is-agotado { color: #b42318; }
.pd-sku { margin: 8px 0 0; color: var(--marca-tenue); font-size: .82rem; }
.pd-opcion.is-agotada { opacity: .5; }
.pd-orden { padding: 6px 10px; border: 1px solid var(--marca-linea); border-radius: 10px; background: var(--marca-superficie); }
.pd-reporte { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-reporte input { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid var(--marca-linea); border-radius: 8px; }
.pd-util.is-hecho { color: var(--marca-acento-hondo); }
.pd-relacionados { margin: 40px 0 10px; }
.pd-relacionados h2 { font: 800 1.4rem 'Manrope', system-ui, sans-serif; margin-bottom: 16px; color: var(--marca-texto); }

/* Las redes de la barra superior: el color de la barra, no el azul de los enlaces. */
.vx-topbar__right a { color: inherit; opacity: .85; text-decoration: none; }
.vx-topbar__right a:hover { opacity: 1; color: var(--marca-realce); }

/* ------------------------------------------------- páginas de contenido */
.vx-pagina__inner { max-width: 1000px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.vx-pagina__cabeza { padding: 34px 0 30px; background: var(--marca-primario); color: var(--marca-sobre-primario); }
.vx-pagina__cabeza--imagen { background: linear-gradient(color-mix(in srgb, var(--marca-primario) 80%, transparent), color-mix(in srgb, var(--marca-primario) 80%, transparent)), var(--fondo) center / cover; }
.vx-pagina__cabeza .cat-migas, .vx-pagina__cabeza .cat-migas a { color: color-mix(in srgb, var(--marca-sobre-primario) 72%, transparent); }
.vx-pagina__cabeza h1 { margin: 8px 0 6px; font: 800 clamp(1.8rem, 4vw, 2.6rem) 'Manrope', system-ui, sans-serif; color: var(--marca-sobre-primario); }
.vx-pagina__cabeza p { margin: 0; max-width: 60ch; color: color-mix(in srgb, var(--marca-sobre-primario) 86%, transparent); }
.vx-pagina__cuerpo { padding-top: 32px; padding-bottom: 48px; color: var(--marca-texto); }
.vx-pagina__cuerpo h2 { font: 800 1.35rem 'Manrope', system-ui, sans-serif; margin: 26px 0 12px; }
.vx-pagina__vacio, .vx-pagina__fecha { color: var(--marca-tenue); }
.vx-html p { line-height: 1.7; }
.vx-html a { color: var(--marca-acento-hondo); }
.vx-faq__item { margin-bottom: 10px; border: 1px solid var(--marca-linea); border-radius: 14px; background: var(--marca-superficie); }
.vx-faq__item summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; font-weight: 700; cursor: pointer; list-style: none; }
.vx-faq__item summary::-webkit-details-marker { display: none; }
.vx-faq__item summary i { color: var(--marca-acento-hondo); transition: transform .2s ease; }
.vx-faq__item[open] summary i { transform: rotate(180deg); }
.vx-faq__item .vx-html { padding: 0 18px 14px; color: var(--marca-texto-2); }
.vx-recuadro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding: 24px; border-radius: 18px; background: var(--marca-primario); color: var(--marca-sobre-primario); }
.vx-recuadro h2 { margin: 0 0 4px; color: var(--marca-sobre-primario); }
.vx-recuadro p { margin: 0; opacity: .85; }
.vx-pagina__foto { width: 100%; max-height: 380px; object-fit: cover; border-radius: 18px; }
.vx-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 24px 0; }
.vx-cifras div { padding: 18px; border-radius: 16px; background: var(--marca-acento-suave); text-align: center; }
.vx-cifras b { display: block; font: 800 1.8rem 'Manrope', system-ui, sans-serif; color: var(--marca-acento-hondo); }
.vx-cifras span { color: var(--marca-texto-2); }
.vx-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.vx-valores article { padding: 20px; border: 1px solid var(--marca-linea); border-radius: 16px; background: var(--marca-superficie); }
.vx-valores i { color: var(--marca-acento-hondo); font-size: 1.4rem; }
.vx-valores h3 { margin: 10px 0 6px; font: 800 1.05rem 'Manrope', system-ui, sans-serif; }
.vx-valores p { margin: 0; color: var(--marca-tenue); }
.vx-contacto__lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.vx-contacto__lista li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--marca-linea); border-radius: 14px; background: var(--marca-superficie); }
.vx-contacto__lista i { width: 22px; color: var(--marca-acento-hondo); text-align: center; }
.vx-contacto__lista a { color: var(--marca-texto); font-weight: 600; }
.vx-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.vx-indice a { padding: 6px 12px; border-radius: 99px; background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-weight: 700; font-size: .88rem; text-decoration: none; }
.vx-documento { padding-top: 6px; scroll-margin-top: 140px; }
.vx-documento__intro { color: var(--marca-tenue); }
.vx-documento h3 { font: 700 1.05rem 'Manrope', system-ui, sans-serif; margin: 18px 0 6px; }

/* ------------------------------------------------- pago: dirección nueva */
.vx-nueva-direccion { margin-top: 12px; }
.vx-form-direccion { margin-top: 14px; padding: 16px; border: 1px dashed var(--marca-linea); border-radius: 14px; }
.vx-form-direccion__pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.envio-opcion.is-incompleta { opacity: .55; }
.csum-cupon__aviso.is-bien { color: #157a45; }
.csum-cupon__aviso.is-mal { color: #b42318; }

/* ------------------------------------------------- cuenta y pago */
.acct-main > h2, .acct-main section > h2 { font: 800 1.2rem 'Manrope', system-ui, sans-serif; margin: 22px 0 12px; color: var(--marca-texto); }
.acct-nav form { margin: 0; }
button.acct-nav__link { width: 100%; border: 0; border-top: 1px solid var(--marca-linea); background: none; text-align: left; font: inherit; font-weight: 600; }
.checkout-card [data-confirmar], .vx-confirmar { width: 100%; margin-top: 14px; padding: 14px 18px; border: 0; border-radius: 999px; background: var(--marca-acento); color: var(--marca-sobre-acento); font-weight: 800; font-size: 1rem; }
.checkout-card [data-confirmar]:hover:not(:disabled) { background: var(--marca-acento-hondo); }
.checkout-card [data-confirmar]:disabled { opacity: .55; cursor: not-allowed; }
.btn-verif.vx-nueva-direccion { width: 100%; padding: 10px; border: 1px dashed var(--marca-acento); background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-size: .9rem; }
.checkout-card > .payment-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.csum-cupon__fila input::placeholder { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------- 404 */
.vx-error404 { max-width: 620px; margin: 0 auto; padding: 70px 20px 80px; text-align: center; color: var(--marca-texto); }
.vx-error404__icono { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-size: 2.2rem; }
.vx-error404 h1 { margin: 20px 0 8px; font: 800 clamp(1.6rem, 4vw, 2.2rem) 'Manrope', system-ui, sans-serif; }
.vx-error404 p { color: var(--marca-tenue); }
.vx-error404__buscar { display: flex; gap: 8px; margin: 24px 0 18px; }
.vx-error404__buscar input { flex: 1; min-width: 0; padding: 12px 16px; border: 1px solid var(--marca-linea); border-radius: 999px; background: var(--marca-superficie); }
.vx-error404__volver { color: var(--marca-acento-hondo); font-weight: 700; text-decoration: none; }
.vx-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: 0 1.4rem; border: 0; border-radius: 999px;
  background: var(--marca-acento); color: var(--marca-sobre-acento); font: 800 .95rem 'Manrope', system-ui, sans-serif; text-decoration: none; white-space: nowrap; transition: background .2s ease; }
.vx-boton:hover { background: var(--marca-acento-hondo); color: var(--marca-sobre-acento-hondo); }

/* pago: los métodos, uno por fila (nombre y explicación); las líneas del resumen, con su detalle debajo */
.payment-options--lista { grid-template-columns: 1fr; }
.payment-options--lista .payment-option > span { display: flex; flex-direction: column; gap: 2px; }
.payment-options--lista .payment-option b { font-weight: 800; }
.payment-options--lista .payment-option small { font-weight: 500; color: var(--marca-tenue); line-height: 1.4; }
.csum-linea > span:first-child { display: flex; flex-direction: column; }
.csum-linea > span:first-child small { font-size: .74rem; color: var(--marca-tenue); }
.csum-linea > span:last-child { white-space: nowrap; }

/* pedido: títulos de la tienda y migas con el color de la marca */
.ti-pedido h2 { font: 800 1.15rem 'Manrope', system-ui, sans-serif; color: var(--marca-texto); margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.ti-pedido h2 i { color: var(--marca-acento-hondo); }
.ti-migas a { color: var(--marca-acento-hondo); }

/* ===================================================== ancho completo (2026-11-02)
   La tienda ocupa todo el ancho de la pantalla, con un margen lateral que crece
   con ella. Los textos largos conservan su ancho de lectura; el carrito, el
   pago, la cuenta y las páginas de contenido siguen centrados. */
:root { --vx-margen: clamp(16px, 3vw, 48px); }
.vx-topbar__inner, .vx-navbar__inner, .vx-shopbar__inner, .vx-shopcats__inner, .vx-foot__inner, .vx-garantias__inner,
.pt-contenedor, .pd-wrap, .shop-wrap, .page-catalogo .shop-wrap {
  max-width: none;
  padding-left: var(--vx-margen);
  padding-right: var(--vx-margen);
}
@media (min-width: 576px) { .page-catalogo .shop-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.pt-aviso { max-width: none; margin-left: var(--vx-margen); margin-right: var(--vx-margen); }

/* ===================================================== imágenes de las categorías */
.vx-catpanel__ic--imagen { width: 44px; height: 44px; padding: 0; overflow: hidden; background: var(--marca-fondo); }
.vx-catpanel__ic--imagen img { width: 100%; height: 100%; object-fit: cover; }
.cat-franja__imagen { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex: none; }
.cat-franja__fila:has(.cat-franja__imagen) { justify-content: flex-start; }
.cat-franja__fila:has(.cat-franja__imagen) .cat-franja__total { margin-left: auto; }

.pt-categorias__fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pt-categoria { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px 16px; border: 1px solid var(--marca-linea); border-radius: 18px;
  background: var(--marca-superficie); color: var(--marca-texto); text-align: center; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pt-categoria:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--marca-acento) 45%, var(--marca-linea));
  box-shadow: 0 16px 30px -20px color-mix(in srgb, var(--marca-primario) 45%, transparent); color: var(--marca-texto); }
.pt-categoria__imagen { display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 140px; margin-bottom: 4px; border-radius: 50%; overflow: hidden;
  background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-size: 2rem; }
.pt-categoria__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pt-categoria:hover .pt-categoria__imagen img { transform: scale(1.06); }
.pt-categoria b { font: 800 .98rem 'Manrope', system-ui, sans-serif; line-height: 1.25; }
.pt-categoria small { color: var(--marca-tenue); font-size: .8rem; }
@media (max-width: 575.98px) {
  .pt-categorias__fila { grid-auto-flow: column; grid-auto-columns: 118px; grid-template-columns: none; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .pt-categoria { scroll-snap-align: start; padding: 10px 8px 12px; }
}

/* ===================================================== filtro de marcas: con su logo */
.vx-fpanel__item--marca { display: flex; align-items: center; gap: .65rem; }
.vx-fpanel__item--marca .vx-fpanel__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-fpanel__item--marca .fa-check { order: 9; }
.vx-fpanel__logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--marca-linea); border-radius: 10px;
  background: var(--marca-superficie); overflow: hidden; }
.vx-fpanel__logo img { max-width: 30px; max-height: 30px; object-fit: contain; }
.vx-fpanel__logo b { font: 800 .9rem 'Manrope', system-ui, sans-serif; color: var(--marca-acento-hondo); }

/* ===================================================== filtro de color: círculos pequeños */
.vx-fpanel--colores { width: min(300px, calc(100vw - 2rem)); }
.vx-colores { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px; }
.vx-color { position: relative; display: inline-flex; cursor: pointer; }
.vx-color .vx-fpanel__chk { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.vx-color__muestra { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.vx-color__muestra i { font-size: .7rem; color: #fff; opacity: 0; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .7)); }
.vx-color:hover .vx-color__muestra { transform: scale(1.1); }
.vx-color .vx-fpanel__chk:checked + .vx-color__muestra { box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, transparent), 0 0 0 2px var(--marca-superficie), 0 0 0 4px var(--marca-acento); }
.vx-color .vx-fpanel__chk:checked + .vx-color__muestra i { opacity: 1; }
.vx-color .vx-fpanel__chk:focus-visible + .vx-color__muestra { outline: 2px solid var(--marca-acento); outline-offset: 3px; }

/* ===================================================== colores de la marca: botones, enlaces, cabecera y pie
   Los botones principales tienen su color (--marca-boton) y su hover; el
   acento queda para los realces (etiquetas, iconos, filetes). La cabecera y el
   pie, su texto y su hover; los enlaces del contenido, igual. Todo se elige en
   Contenido → Marca; sin elegir, sale de los cinco colores de siempre. */
body :is(.vx-pcard__add, .vx-mini__add, .pt-boton, .pd-btn--oro, .vx-boton, .vx-confirmar, .checkout-card [data-confirmar], .ti-boton--oro,
  .ti-form .ti-boton--grande, .ti-boton--grande, #checkout-btn.cart-checkout, .cart-empty__btn, .rv-btn--oro, .order-card__btn, .vx-tostada a, .shop-empty a) {
  background: var(--marca-boton); border-color: var(--marca-boton); color: var(--marca-sobre-boton);
}
body :is(.vx-pcard__add, .vx-mini__add, .pt-boton, .pd-btn--oro, .vx-boton, .vx-confirmar, .checkout-card [data-confirmar], .ti-boton--oro,
  .ti-form .ti-boton--grande, .ti-boton--grande, #checkout-btn.cart-checkout, .cart-empty__btn, .rv-btn--oro, .order-card__btn, .vx-tostada a, .shop-empty a):hover:not(:disabled) {
  background: var(--marca-boton-hover); border-color: var(--marca-boton-hover); color: var(--marca-sobre-boton-hover);
}
body :is(.vx-pcard__add, .vx-mini__add, .pd-btn--oro, .vx-confirmar, .ti-boton--grande, #checkout-btn.cart-checkout):disabled { background: var(--marca-boton); }

/* Enlaces del contenido, migas y formularios */
body :is(.vx-html a, .ti-enlace, .ti-form a, .ti-tenue a, .cat-migas a, .ti-migas a, .pd-crumbs a, .vx-documento a, .checkout-acepta a, .vx-pagina__cuerpo a:not(.vx-boton)) {
  color: var(--marca-enlace);
}
body :is(.vx-html a, .ti-enlace, .ti-form a, .ti-tenue a, .cat-migas a, .ti-migas a, .pd-crumbs a, .vx-documento a, .checkout-acepta a, .vx-pagina__cuerpo a:not(.vx-boton)):hover {
  color: var(--marca-enlace-hover);
}
/* Las migas de las páginas de contenido van sobre el primario: son de la cabecera. */
body .vx-pagina__cabeza .cat-migas a { color: var(--marca-cabecera-texto); }
body .vx-pagina__cabeza .cat-migas a:hover { color: var(--marca-cabecera-hover); }

/* Cabecera: la barra de contacto y la fila de categorías (sobre el primario) */
body :is(.vx-topbar__item, .vx-topbar__right a, .vx-crit, .vx-shopcats__todas, .vx-shopcats__links a) { color: var(--marca-cabecera-texto); }
body :is(.vx-topbar__item, .vx-topbar__right a, .vx-crit, .vx-shopcats__todas, .vx-shopcats__links a):hover,
body .vx-crit[aria-expanded="true"] { color: var(--marca-cabecera-hover); }
body .vx-crit.is-activo { color: var(--marca-cabecera-hover); }

/* Pie: textos, enlaces y redes */
body :is(.vx-foot__tagline, .vx-foot__contact li, .vx-foot__contact a, .vx-foot__links a, .vx-foot__copy, .vx-foot__legal a, .vx-foot__social a, .vx-foot__contact small) {
  color: var(--marca-pie-texto);
}
body :is(.vx-foot__contact a, .vx-foot__links a, .vx-foot__legal a, .vx-foot__social a):hover { color: var(--marca-pie-hover); }
body .vx-foot__social a { border-color: color-mix(in srgb, var(--marca-pie-texto) 35%, transparent); }
body .vx-foot__social a:hover { border-color: var(--marca-pie-hover); background: transparent; }

/* ===================================================== sin cuenta: el aviso del carrito y de favoritos */
.vx-carrito-entrar, .vx-favoritos-aviso { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  background: var(--marca-acento-suave); color: var(--marca-texto-2); font-size: .86rem; line-height: 1.45; }
.vx-carrito-entrar i, .vx-favoritos-aviso i { margin-top: 3px; color: var(--marca-acento-hondo); }
.vx-favoritos-aviso { margin: 0 0 18px; align-items: center; }
.vx-favoritos-aviso a { margin-left: auto; color: var(--marca-enlace); font-weight: 700; white-space: nowrap; }

/* ===================================================== acceso y formularios de la cuenta
   Entrar, crear la cuenta, el código, olvidé la contraseña y restablecer; y los
   formularios de la cuenta (datos, direcciones, seguridad), que comparten .ti-form. */
.ti-acceso { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.ti-acceso__caja { border-color: var(--marca-linea); background: var(--marca-superficie); box-shadow: 0 24px 48px -32px color-mix(in srgb, var(--marca-primario) 45%, transparent); }
.ti-acceso h1 { margin: 0 0 .35rem; font: 800 clamp(1.6rem, 3.4vw, 2.05rem) 'Manrope', system-ui, sans-serif; color: var(--marca-texto); letter-spacing: -.01em; }
.ti-acceso .ti-tenue { color: var(--marca-tenue); }
.ti-acceso__icono { background: var(--marca-acento-suave); color: var(--marca-acento-hondo); }
.ti-acceso__otro { color: var(--marca-tenue); }
.ti-acceso__otro a, .ti-acceso__otro .ti-enlace { color: var(--marca-enlace); text-decoration: underline; text-underline-offset: 3px; }
.ti-acceso__otro a:hover, .ti-acceso__otro .ti-enlace:hover { color: var(--marca-enlace-hover); }

.ti-form label { color: var(--marca-texto); }
.ti-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea),
.acct-main :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) {
  width: 100%; min-height: 46px; padding: .65rem .85rem; border: 1px solid var(--marca-linea); border-radius: 12px;
  background: var(--marca-superficie); color: var(--marca-texto); font: 500 .95rem 'Inter', system-ui, sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ti-form textarea, .acct-main textarea { min-height: 96px; resize: vertical; }
.ti-form :is(input, select, textarea)::placeholder, .acct-main :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--marca-tenue) 75%, transparent); }
.ti-form :is(input, select, textarea):hover, .acct-main :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--marca-texto) 28%, var(--marca-linea)); }
.ti-form :is(input, select, textarea):focus, .acct-main :is(input, select, textarea):focus {
  outline: none; border-color: var(--marca-acento-hondo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 28%, transparent);
}
.ti-form .is-mal { border-color: #b42318 !important; background: #fdecea; }

/* La contraseña, con su ojo dentro del campo */
.ti-clave { position: relative; display: block; }
.ti-clave input { padding-right: 3rem !important; }
.ti-clave .ti-icono-boton { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.ti-icono-boton { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--marca-tenue); cursor: pointer; }
.ti-icono-boton:hover { background: var(--marca-acento-suave); color: var(--marca-acento-hondo); }

/* Particular o empresa */
.ti-elegir { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.ti-elegir__opcion { position: relative; cursor: pointer; }
.ti-elegir__opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ti-elegir__opcion > span { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: 1rem 1.05rem; border: 1.5px solid var(--marca-linea); border-radius: 14px;
  background: var(--marca-superficie); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ti-elegir__opcion:hover > span { border-color: color-mix(in srgb, var(--marca-acento) 55%, var(--marca-linea)); }
.ti-elegir__opcion i { margin-bottom: .35rem; font-size: 1.25rem; color: var(--marca-acento-hondo); }
.ti-elegir__opcion b { font: 800 .98rem 'Manrope', system-ui, sans-serif; color: var(--marca-texto); }
.ti-elegir__opcion small { color: var(--marca-tenue); font-weight: 500; }
.ti-elegir__opcion input:checked + span { border-color: var(--marca-acento-hondo); background: var(--marca-acento-suave);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-acento) 22%, transparent); }
.ti-elegir__opcion input:focus-visible + span { outline: 2px solid var(--marca-acento-hondo); outline-offset: 2px; }
@media (max-width: 420px) { .ti-elegir { grid-template-columns: 1fr; } }

.ti-form__grupo { display: grid; gap: 1rem; margin: 0; padding: 1rem; border: 1px solid var(--marca-linea); border-radius: 14px; grid-template-columns: inherit; }
.ti-form__grupo legend { padding: 0 .35rem; font: 800 .92rem 'Manrope', system-ui, sans-serif; color: var(--marca-texto); }
@media (min-width: 640px) { .ti-form__grupo { grid-template-columns: 1fr 1fr; } }

/* Las casillas: con el color de los botones */
.ti-casilla { color: var(--marca-texto-2); line-height: 1.45; }
.ti-casilla input { width: 20px; height: 20px; margin-top: .05rem; accent-color: var(--marca-boton); cursor: pointer; }
.ti-casilla a { color: var(--marca-enlace); }
.ti-casilla a:hover { color: var(--marca-enlace-hover); }

/* El código del correo: seis cifras, grandes y separadas */
.ti-form .ti-codigo-grande { min-height: 64px; font: 800 1.7rem 'Manrope', system-ui, sans-serif !important; letter-spacing: .5em; text-align: center; padding-left: .5em !important; }
.ti-acceso .ti-boton--grande { min-height: 52px; border-radius: 999px; font: 800 1rem 'Manrope', system-ui, sans-serif; }
.ti-acceso .ti-aviso--error { margin: 0; }
body .vx-foot__social a.btn { color: var(--marca-pie-texto); border-color: color-mix(in srgb, var(--marca-pie-texto) 35%, transparent); }
body .vx-foot__social a.btn:hover { color: var(--marca-pie-hover); border-color: var(--marca-pie-hover); background: transparent; }
#checkout-btn.cart-checkout { text-decoration: none; }
#checkout-btn.cart-checkout.disabled { opacity: .55; pointer-events: none; }

/* ===================================================== confirmar (ti.confirmar): cerrar sesión, quitar, darse de baja */
.ti-ventana.vx-confirmar { width: min(440px, calc(100vw - 32px)); padding: 1.6rem 1.5rem 1.3rem; border: 0; border-radius: 18px; background: var(--marca-superficie);
  color: var(--marca-texto); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); text-align: center; }
.ti-ventana.vx-confirmar::backdrop { background: color-mix(in srgb, var(--marca-primario) 55%, transparent); backdrop-filter: blur(2px); }
.vx-confirmar__icono { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: .6rem; border-radius: 50%;
  background: var(--marca-acento-suave); color: var(--marca-acento-hondo); font-size: 1.3rem; }
.vx-confirmar--peligro .vx-confirmar__icono { background: #fdecea; color: #b42318; }
.ti-ventana.vx-confirmar h2 { margin: 0 0 .4rem; font: 800 1.2rem 'Manrope', system-ui, sans-serif; }
.ti-ventana.vx-confirmar p { margin: 0 0 1.2rem; color: var(--marca-tenue); line-height: 1.5; }
.vx-confirmar__pie { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.vx-confirmar__pie .ti-boton { min-width: 130px; border-radius: 999px; }
.vx-confirmar__pie .ti-boton--peligro { background: #b42318; border-color: #b42318; color: #fff; }
.vx-confirmar__pie .ti-boton--peligro:hover { background: #911d14; }