/* Barra "Tienda en línea" y footer del sitio (rediseño nov 2026). Generado desde la propuesta header-footer; todo limitado a .ocx. */
.ocx.ocx-cta * { box-sizing: border-box !important; }
.ocx.ocx-cta { font-family: var(--f-titulo) !important; font-size: 14px !important; line-height: 1.6 !important; }
.ocx.ocx-cta h3, .ocx.ocx-cta h4, .ocx.ocx-cta p, .ocx.ocx-cta ul { margin: 0 !important; }
.ocx.ocx-cta a { text-decoration: none !important; }
.ocx.ocx-cta { --rojo: #e60918; --rojo-osc: #c10714; --negro: #0f0f0f; --carbon: #1c1b1b; --carbon-2: #2a2828; --papel: #ffffff; --niebla: #f3f2f1; --linea: #e4e2e0; --tinta: #1a1919; --tenue: #6b6866; --sobre-oscuro: #f3f1ef; --tenue-oscuro: #a9a5a2; --f-titulo: "Poppins", "Segoe UI", system-ui, sans-serif; --f-dato: "JetBrains Mono", ui-monospace, monospace; }
.ocx.ocx-cta .cta-a { background: var(--carbon) !important; color: var(--sobre-oscuro) !important; border-top: 1px solid var(--carbon-2) !important; }
.ocx.ocx-cta .cta-a-in { display: flex !important; align-items: center !important; gap: 16px !important; padding: 12px 24px !important; max-width: 1240px !important; margin: 0 auto !important; }
.ocx.ocx-cta .cta-ico { flex: 0 0 auto !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--rojo) !important; color: var(--papel) !important; display: grid !important; place-items: center !important; font-size: 16px !important; }
.ocx.ocx-cta .cta-a .cta-btn { margin-left: auto !important; }
.ocx.ocx-cta .cta-a-txt { display: flex !important; flex-direction: column !important; min-width: 0 !important; line-height: 1.3 !important; }
.ocx.ocx-cta .cta-a-txt b { font-weight: 600 !important; font-size: 15px !important; color: var(--papel) !important; }
.ocx.ocx-cta .cta-a-txt span { font-size: 12.5px !important; color: var(--tenue-oscuro) !important; }
.ocx.ocx-cta .cta-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--rojo) !important; color: var(--papel) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; padding: 10px 18px !important; border-radius: 10px !important; white-space: nowrap !important; }
.ocx.ocx-cta .cta-btn:hover { background: var(--rojo-osc) !important; }
.ocx.ocx-cta .cta-btn .corto { display: none !important; }
@media (max-width: 560px) {
.ocx.ocx-cta .cta-a-in { padding: 10px 14px !important; gap: 12px !important; }
.ocx.ocx-cta .cta-ico { width: 34px !important; height: 34px !important; font-size: 14px !important; }
.ocx.ocx-cta .cta-a-txt b { font-size: 14px !important; }
.ocx.ocx-cta .cta-a-txt span { font-size: 11.5px !important; }
.ocx.ocx-cta .cta-btn { padding: 9px 14px !important; font-size: 13px !important; }
.ocx.ocx-cta .cta-btn .largo { display: none !important; }
.ocx.ocx-cta .cta-btn .corto { display: inline !important; }
}
.ocx.ocx-ft * { box-sizing: border-box !important; }
.ocx.ocx-ft { font-family: var(--f-titulo) !important; font-size: 14px !important; line-height: 1.6 !important; }
.ocx.ocx-ft h3, .ocx.ocx-ft h4, .ocx.ocx-ft p, .ocx.ocx-ft ul { margin: 0 !important; }
.ocx.ocx-ft a { text-decoration: none !important; }
.ocx.ocx-ft { --rojo: #e60918; --rojo-osc: #c10714; --negro: #0f0f0f; --carbon: #1c1b1b; --carbon-2: #2a2828; --papel: #ffffff; --niebla: #f3f2f1; --linea: #e4e2e0; --tinta: #1a1919; --tenue: #6b6866; --sobre-oscuro: #f3f1ef; --tenue-oscuro: #a9a5a2; --f-titulo: "Poppins", "Segoe UI", system-ui, sans-serif; --f-dato: "JetBrains Mono", ui-monospace, monospace; }
.ocx.ocx-ft .ft { background: var(--negro) !important; color: var(--sobre-oscuro) !important; font-size: 14px !important; }
.ocx.ocx-ft .ft-in { max-width: 1240px !important; margin: 0 auto !important; padding: 0 32px !important; }
.ocx.ocx-ft .ft-cta { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 18px 32px !important; padding: 40px 0 34px !important; border-bottom: 1px solid var(--carbon-2) !important; }
.ocx.ocx-ft .ft-cta h3 { margin: 0 !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 600 !important; color: var(--papel) !important; letter-spacing: -.015em !important; text-wrap: balance !important; }
.ocx.ocx-ft .ft-cta p { margin: 6px 0 0 !important; color: var(--tenue-oscuro) !important; }
.ocx.ocx-ft .ft-cta-btns { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.ocx.ocx-ft .btn-linea { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 18px !important; border-radius: 10px !important; border: 1px solid var(--tenue-oscuro) !important; color: var(--papel) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; }
.ocx.ocx-ft .btn-linea:hover { border-color: var(--papel) !important; }
.ocx.ocx-ft .ft-cols { display: grid !important; grid-template-columns: 1.3fr 1fr 1fr 1fr !important; gap: 32px !important; padding: 40px 0 !important; border-top: 1px solid var(--carbon-2) !important; }
.ocx.ocx-ft .ft-marca img { height: 30px !important; width: auto !important; display: block !important; }
.ocx.ocx-ft .ft-marca p { color: var(--tenue-oscuro) !important; margin: 14px 0 18px !important; max-width: 32ch !important; }
.ocx.ocx-ft .redes { display: flex !important; gap: 8px !important; }
.ocx.ocx-ft .redes a { width: 36px !important; height: 36px !important; border-radius: 50% !important; display: grid !important; place-items: center !important; background: var(--carbon) !important; color: var(--papel) !important; font-size: 15px !important; text-decoration: none !important; }
.ocx.ocx-ft .redes a:hover { background: var(--rojo) !important; }
.ocx.ocx-ft .ft-col h4 { margin: 0 0 12px !important; font: 600 12px var(--f-titulo) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--papel) !important; }
.ocx.ocx-ft .ft-col ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 7px !important; }
.ocx.ocx-ft .ft-col a { text-decoration: none !important; color: var(--tenue-oscuro) !important; }
.ocx.ocx-ft .ft-col a:hover { color: var(--papel) !important; }
.ocx.ocx-ft .ft-col a.ir { color: var(--rojo) !important; font-weight: 600 !important; }
.ocx.ocx-ft .ft-suc-tit { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; padding-top: 34px !important; }
.ocx.ocx-ft .ft-suc-tit h4 { margin: 0 !important; font: 600 12px var(--f-titulo) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--papel) !important; }
.ocx.ocx-ft .ft-suc-tit a { font-size: 13px !important; color: var(--tenue-oscuro) !important; text-decoration: none !important; }
.ocx.ocx-ft .ft-suc { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; padding: 16px 0 36px !important; }
.ocx.ocx-ft .suc { background: var(--carbon) !important; border-radius: 12px !important; padding: 18px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; min-width: 0 !important; }
.ocx.ocx-ft .suc small { font: 500 11px var(--f-dato) !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--rojo) !important; }
.ocx.ocx-ft .suc b { font-size: 16px !important; font-weight: 600 !important; color: var(--papel) !important; }
.ocx.ocx-ft .suc p { margin: 0 !important; color: var(--tenue-oscuro) !important; font-size: 13px !important; line-height: 1.5 !important; }
.ocx.ocx-ft .suc .tels { display: flex !important; flex-wrap: wrap !important; gap: 4px 14px !important; font-family: var(--f-dato) !important; font-size: 13px !important; }
.ocx.ocx-ft .suc .tels a { text-decoration: none !important; color: var(--sobre-oscuro) !important; }
.ocx.ocx-ft .suc .mapa { margin-top: auto !important; padding-top: 6px !important; font-size: 13px !important; color: var(--papel) !important; text-decoration: none !important; font-weight: 600 !important; display: inline-flex !important; gap: 6px !important; align-items: center !important; }
.ocx.ocx-ft .suc .mapa:hover { color: var(--rojo) !important; }
.ocx.ocx-ft .ft-base { border-top: 1px solid var(--carbon-2) !important; }
.ocx.ocx-ft .ft-base .ft-in { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 8px 20px !important; padding-block: 18px !important; font-size: 12.5px !important; color: var(--tenue-oscuro) !important; }
.ocx.ocx-ft .ft-base a { color: var(--tenue-oscuro) !important; }
@media (max-width: 1000px) {
.ocx.ocx-ft .ft-cols { grid-template-columns: 1fr 1fr 1fr !important; }
.ocx.ocx-ft .ft-marca { grid-column: 1 / -1 !important; }
.ocx.ocx-ft .ft-suc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
.ocx.ocx-ft .ft-in { padding: 0 18px !important; }
.ocx.ocx-ft .ft-cta { padding: 30px 0 26px !important; }
.ocx.ocx-ft .ft-cta h3 { font-size: 21px !important; }
.ocx.ocx-ft .ft-cta-btns { width: 100% !important; }
.ocx.ocx-ft .ft-cta-btns a { flex: 1 !important; justify-content: center !important; }
.ocx.ocx-ft .ft-cols { grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; padding: 30px 0 !important; }
.ocx.ocx-ft .ft-col.ft-tienda { grid-column: 1 / -1 !important; }
.ocx.ocx-ft .ft-col.ft-tienda ul { grid-template-columns: 1fr 1fr !important; }
.ocx.ocx-ft .ft-suc { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
.ocx.ocx-ft .suc { padding: 14px 16px !important; }
.ocx.ocx-ft .ft-base .ft-in { flex-direction: column !important; text-align: center !important; align-items: center !important; }
}
.ocx.ocx-ft .cta-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; background: var(--rojo) !important; color: var(--papel) !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; padding: 10px 18px !important; border-radius: 10px !important; white-space: nowrap !important; }
.ocx.ocx-ft .cta-btn:hover { background: var(--rojo-osc) !important; }
.ocx.ocx-ft .cta-btn .corto { display: none !important; }