/* cpuproductlayout — front.css (diseño de 3 columnas)
 * Cada bloque recibe desde el editor estas variables en su contenedor:
 *   --cpl-color (texto) · --cpl-accent (acento) · --cpl-scale (tamaño de texto, 1 = 100 %)
 */
.cpl-layout { --cpl-navy:#051a59; --cpl-blue:#1553d6; --cpl-green:#0a8a4a; --cpl-green-bg:#e8f6ee; --cpl-grey:#6b7280; --cpl-line:#e5e9f0; font-family:'Inter',sans-serif; }
.cpl-block { margin-bottom: var(--cpl-gap, 14px); color: var(--cpl-color, inherit); scroll-margin-top: 90px; }
.cpl-preview-banner { background:#fff3cd; color:#7a5b00; text-align:center; font-weight:700; padding:8px; border-bottom:1px solid #f0d98a; }

/* visibilidad por dispositivo */
@media (max-width: 991px) { .cpl-hide-m { display: none !important; } }
@media (min-width: 992px) { .cpl-hide-d { display: none !important; } }

/* tarjeta: los bloques "tarjeta" consecutivos se pintan como una sola */
.cpl-cardgroup { background:#fff; border:1px solid var(--cpl-line); border-radius:14px; box-shadow:0 4px 16px rgba(5,26,89,.08); overflow:hidden; margin-bottom:var(--cpl-gap, 14px); }
.cpl-cardgroup > .cpl-block.cpl-card { margin:0; padding:14px 20px; border-bottom:1px solid var(--cpl-line); border-radius:0; }
.cpl-cardgroup > .cpl-block.cpl-card:last-child { border-bottom:0; }
.cpl-cardgroup > .cpl-block--price,
.cpl-cardgroup > .cpl-block--condition,
.cpl-cardgroup > .cpl-block--availability { border-bottom:0; }
.cpl-cardgroup > .cpl-block--price { padding-bottom:6px; }
.cpl-cardgroup > .cpl-block--condition { padding-top:4px; padding-bottom:0; }
.cpl-cardgroup > .cpl-block--availability { padding-top:0; padding-bottom:10px; }

/* en línea: los bloques "en línea" consecutivos comparten fila */
.cpl-rowgroup { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; justify-content:var(--cpl-justify, flex-start); margin-bottom:var(--cpl-gap, 14px); }
.cpl-rowgroup > .cpl-block { margin:0; }

/* cabecera */
.cpl-brand a { color: var(--cpl-accent, var(--cpl-blue)); font-weight: 600; font-size: calc(16px * var(--cpl-scale, 1)); text-decoration: none; }
.cpl-title { margin: 2px 0 8px !important; font-size: calc(26px * var(--cpl-scale, 1)); font-weight: 700; color: var(--cpl-color, var(--cpl-navy)); border-bottom: none !important; }
.cpl-rating { line-height: 1; }

/* envío y entrega */
.cpl-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: calc(14px * var(--cpl-scale, 1)); }
.cpl-badge--free { background: var(--cpl-accent, var(--cpl-green)); color: #fff; }
.cpl-badge--delivery { background: var(--cpl-green-bg); color: var(--cpl-accent, var(--cpl-green)); }
.cpl-badge--warn { color: #e67e00; font-weight: 700; }
.cpl-badges--lowprice { background: #f2f3f5; padding: 10px 16px; border-radius: 6px; color: #111; font-size: calc(15px * var(--cpl-scale, 1)); }

/* clientes / unidades */
.cpl-social__item { display: flex; align-items: center; justify-content: var(--cpl-justify, flex-start); gap: 8px; color: var(--cpl-color, var(--cpl-navy)); font-size: calc(15px * var(--cpl-scale, 1)); }
.cpl-social__img { height: 20px; width: auto; }

/* precio */
.cpl-price__badge { display: inline-block; background: var(--cpl-accent, linear-gradient(to right,#f8b429,#ef8a15)); color: #fff; border-radius: 8px; padding: 6px 14px; font-weight: 800; font-size: calc(12px * var(--cpl-scale, 1)); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.cpl-price__row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; justify-content: var(--cpl-justify, flex-start); }
.cpl-price__current { font-size: calc(46px * var(--cpl-scale, 1)); font-weight: 800; color: var(--cpl-color, var(--cpl-navy)); line-height: 1; }
.cpl-price__old { font-size: calc(20px * var(--cpl-scale, 1)); color: #999; text-decoration: line-through; }
.cpl-price__saving { display: inline-block; margin-top: 8px; background: var(--cpl-accent, var(--cpl-green)); color: #fff; border-radius: 999px; padding: 3px 14px; font-size: calc(14px * var(--cpl-scale, 1)); font-weight: 700; }

/* estado / disponibilidad */
.cpl-stock__line { color: var(--cpl-color, var(--cpl-navy)); font-size: calc(15px * var(--cpl-scale, 1)); }
.cpl-stock__label { margin-right: 4px; font-weight: 700; }
.cpl-stock__ok { color: var(--cpl-accent, var(--cpl-green)); }

/* botón de compra */
.cpl-block--addtocart .btn-comprar-animado:not(.btn-comprar-animado-sticky) {
    background: var(--cpl-accent, linear-gradient(to right,#f9bc31 0%,#fad65c 50%,#f9bc31 100%)) !important;
    background-size: 200% auto !important;
    color: var(--cpl-color, #051a59) !important;
    font-size: calc(24px * var(--cpl-scale, 1)) !important;
}
.cpl-sticky { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 15px; }
.cpl-sticky__info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; color: #051a59; }
.cpl-sticky__name { font-size: 13px; line-height: 1.25; color: #666; word-break: break-word; }
.cpl-sticky__price { font-size: 22px; font-weight: 800; line-height: 1.1; margin-top: 2px; }

/* "¿Prefieres pagar a plazos?" */
.cpl-installments { display: flex; align-items: center; justify-content: var(--cpl-justify, flex-start); gap: 12px; text-decoration: none; color: var(--cpl-color, var(--cpl-navy)); }
.cpl-installments__q { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--cpl-accent, var(--cpl-navy)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.cpl-installments__txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.cpl-installments__txt strong { font-size: calc(15px * var(--cpl-scale, 1)); }
.cpl-installments__txt small { font-size: calc(12px * var(--cpl-scale, 1)); color: var(--cpl-grey); }
.cpl-installments__arrow { font-size: 22px; color: var(--cpl-grey); }

/* iconos de confianza */
.cpl-trust { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; font-size: calc(13px * var(--cpl-scale, 1)); color: var(--cpl-color, var(--cpl-navy)); }
.cpl-trust__item { display: flex; align-items: center; gap: 6px; }
.cpl-trust__item svg { color: var(--cpl-accent, currentColor); }

/* anchos de columna (en %) y reparto descripción / lateral, editables desde el módulo */
@media (min-width: 992px) {
    .cpl-layout .cpl-region--c1 { flex: 0 0 var(--cpl-w-c1, 33%); max-width: var(--cpl-w-c1, 33%); }
    .cpl-layout .cpl-region--c2 { flex: 0 0 var(--cpl-w-c2, 42%); max-width: var(--cpl-w-c2, 42%); }
    .cpl-layout .cpl-region--c3 { flex: 0 0 var(--cpl-w-c3, 25%); max-width: var(--cpl-w-c3, 25%); }
    .columns-custom-split .product_description_col { flex: 0 0 var(--cpl-split, 70%) !important; max-width: var(--cpl-split, 70%) !important; }
    .columns-custom-split .product-footer-container { flex: 0 0 calc(100% - var(--cpl-split, 70%)) !important; max-width: calc(100% - var(--cpl-split, 70%)) !important; }
}

/* bloques propios (texto, botón, imagen, html) */
.cpl-custom-text__title { font-size: calc(18px * var(--cpl-scale, 1)); font-weight: 700; margin: 0 0 6px; color: var(--cpl-color, var(--cpl-navy)); }
.cpl-custom-text__body { font-size: calc(15px * var(--cpl-scale, 1)); margin: 0; color: var(--cpl-color, inherit); }
.cpl-custom-btn { display: inline-block; width: 100%; text-align: center; text-decoration: none; background: var(--cpl-accent, var(--cpl-navy)); color: #fff; font-weight: 700; font-size: calc(16px * var(--cpl-scale, 1)); border-radius: 10px; padding: 12px 18px; }
.cpl-custom-btn:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }
.cpl-custom-img { max-width: 100%; height: auto; border-radius: inherit; display: block; }

/* contenido que otros módulos inyectan junto al botón de compra (p. ej. el aviso de reacondicionado):
 * se queda donde lo pone su módulo, pero separado del botón. */
.cpl-block--addtocart > :not(.add-to-cart):not(.sticky-bottom-bar):not(style):not(script) { margin-bottom: var(--cpl-gap, 14px); }
.cpl-block--addtocart > .add-to-cart ~ :not(.sticky-bottom-bar):not(style):not(script) { margin-bottom: 0; margin-top: var(--cpl-gap, 14px); }

/* ── v0.9.0 ─────────────────────────────────────────────── */

/* Sección a todo el ancho encima de las columnas: el título ocupa toda la línea y, si es largo, baja de línea sin cortarse */
.cpl-layout .cpl-region--w0 { width: 100%; }
.cpl-layout .cpl-region--w0 .cpl-title { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; text-wrap: balance; }
.cpl-region[style*="background"], .cpl-region[style*="padding"] { box-sizing: border-box; }