:root{
–brand:#0E4A4F; /* verde petróleo */
–accent:#C5A46D; /* dorado suave */
–ink:#ffffff;
–bg:#ffffff;
}
.catalogo *{box-sizing:border-box}
.catalogo{
max-width:980px;margin:0 auto;
padding:clamp(16px,3vw,32px);
color:var(–ink); font-family:”Open Sans”,system-ui,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6;
}
.catalogo h2{
font-family:”Playfair Display”,serif; font-size:clamp(22px,3.8vw,34px);
color:var(–brand); margin:0 0 12px;
}
.catalogo p{margin:0 0 14px; text-align:justify}

.c-wrap{position:relative; margin:16px 0; max-width:100%}

/* Contenedor visible: recorta y contiene flechas */
.c-viewport{
position:relative;
overflow:hidden; /* recorta todo lo que se salga */
border-radius:14px;
background:transparent; /* sin fondo */
}

/* Capa que scrollea */
.c-scroll{
–peek: 12px; /* cuánto asoma la siguiente foto (móvil) */
–gap: 10px;
overflow-x:auto;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; -ms-overflow-style:none;
background:transparent; /* sin fondo */
}
.c-scroll::-webkit-scrollbar{display:none}

.c-track{display:flex; gap:var(–gap); padding-bottom:0; background:transparent}

.c-slide{
flex:0 0 calc(100% – var(–peek));
scroll-snap-align:start;
border-radius:14px; overflow:hidden;
background:transparent; /* sin fondo */
box-shadow:none; /* si querés conservar sombra, sacá esta línea */
}

/* — NUEVO: envoltorio con PROPORCIÓN FIJA para todas las fotos — */
.c-media-wrap{
width:100%;
aspect-ratio: 1 / 1; /* ” y va atrás */
.c-right{ left:8px } /* muestra “<" y va adelante */

@media (min-width:900px){
.c-scroll{ –peek: 60px; }
.c-slide{ flex-basis: calc(50% – var(–peek)); }
}
/* —- Tabla productos (7 columnas) —- */
.table-wrap{margin-top:22px; overflow-x:auto; border:1px solid #e5e7eb; border-radius:12px}
table.catalogo-tabla{width:100%; border-collapse:collapse; table-layout:fixed; min-width:900px}
table.catalogo-tabla th, table.catalogo-tabla td{
border-bottom:1px solid #e5e7eb; padding:10px 10px; text-align:center; font-size:14px; vertical-align:middle;
word-break:break-word;
}
table.catalogo-tabla th{
background:var(–brand); color:#ffffff; font-weight:700; position:sticky; top:0; z-index:1;
}
table.catalogo-tabla tr:nth-child(even){background:}

/* Anchos sugeridos por columna (puedes ajustarlos) */
.col-sku{width:110px}
.col-prod{width:180px}
.col-spec{width:280px; text-align:left}
.col-unit,.col-p5,.col-p10,.col-wa{width:150px}

/* Botones */
.btn{display:inline-block; padding:.55rem .7rem; border-radius:10px; font:700 13px/1 system-ui;
text-decoration:none; border:1px solid transparent}
.btn-primary{background:#0E4A; color:#fff}
.btn-alt{background:#C5A46D; color:#053b23}
.btn-ghost{background:#1118270f; color:#0E4A; border-color:#d1d5db}
.btn-wa{background:#25D366; color:#053b23}
.btn:hover{filter:brightness(1.08)}

@media (max-width:640px){
table.catalogo-tabla th, table.catalogo-tabla td{font-size:12px; padding:8px}
.btn{display:block; width:100%; margin:2px 0}
}

/* 🔧 Desactiva la letra capital del tema de Blogger en esta página */
p::first-letter,
.post-body::first-letter,
.article-content p:first-letter {
font-size: inherit !important;
float: none !important;
font-weight: inherit !important;
line-height: inherit !important;
margin: 0 !important;
}

// Carrusel manual en bucle (sin autoplay), flechas confinadas y sin fondos
(function initCarousel(id){
const root = document.getElementById(id);
if(!root) return;

const scroll = root.querySelector(‘.c-scroll’);
const leftBtn = root.querySelector(‘.c-left’); // “>” (atrás)

const rightBtn= root.querySelector(‘.c-right’); // “{
const v = getComputedStyle(el).getPropertyValue(varName).trim();
return v.endsWith(‘px’) ? parseFloat(v) : fallback;
};

function stepWidth(){
const peek = px(scroll, ‘–peek’, 0);
const gap = px(scroll, ‘–gap’, 10);
const desktop = window.matchMedia(‘(min-width:900px)’).matches;
const basis = desktop ? (scroll.clientWidth/2 – peek) : (scroll.clientWidth – peek);
return basis + gap;
}

function atEnd(){
const eps = 2;
return scroll.scrollLeft + scroll.clientWidth >= scroll.scrollWidth – eps;
}
const atStart = ()=> scroll.scrollLeft {
if (dir > 0 && atEnd()) scroll.scrollTo({ left: 0 });
else if (dir go(-1));
rightBtn.addEventListener(‘click’, ()=>go( 1));

// Teclas ← →
root.tabIndex = 0;
root.addEventListener(‘keydown’, e=>{
if(e.key===’ArrowRight’){ e.preventDefault(); go(1); }
if(e.key===’ArrowLeft’){ e.preventDefault(); go(-1); }
});
})(‘carousel1’);