/* COBOCE Cemento — CEM-23 R4 | Carrusel editorial institucional propio
   Conserva imágenes y datos de CEM-23 V4. Sin bibliotecas externas. */
.cem23-carrusel{
 --cem23-green:#006b43;--cem23-gold:#eeb43e;
 position:relative;left:50%;transform:translateX(-50%);
 display:block;box-sizing:border-box;width:var(--cem23-viewport-width,100vw)!important;
 max-width:none!important;min-width:0;margin:0!important;padding:0!important;
 height:clamp(460px,38vw,690px);overflow:hidden;isolation:isolate;
 background:#e8e7e0;color:var(--cem23-green);font-family:inherit;
}
.cem23-carrusel *{box-sizing:border-box}
.cem23-pistas,.cem23-slide,.cem23-fondo{position:absolute;inset:0;width:100%;height:100%}
.cem23-slide{opacity:0;visibility:hidden;z-index:0;pointer-events:none;will-change:auto}
.cem23-slide.es-saliente{opacity:1;visibility:visible;z-index:1;pointer-events:none}
.cem23-slide.es-activa{opacity:1;visibility:visible;z-index:2;pointer-events:auto}
.cem23-slide.es-activa.es-entrante{animation:cem23-caida-vertical .96s cubic-bezier(.24,.82,.25,1) both;will-change:transform}
@keyframes cem23-caida-vertical{from{transform:translate3d(0,-102%,0)}to{transform:translate3d(0,0,0)}}
.cem23-fondo{display:block;object-fit:cover;object-position:50% 50%;max-width:none!important}
/* Luz muy ligera bajo el texto; mantiene la fotografía original a la vista. */
.cem23-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 17%,rgba(255,255,255,.1) 30%,rgba(255,255,255,.25) 49%,rgba(255,255,255,.1) 64%,transparent 84%)}
/* Zona central coherente en las cuatro diapositivas; deja libre la bolsa a la derecha. */
.cem23-textos{
 position:absolute;left:26%;top:47%;transform:translateY(-50%);
 width:45%;max-width:790px;padding:18px clamp(20px,3vw,56px);
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:clamp(11px,1.1vw,19px);text-align:center;
 text-shadow:none;
}
.cem23-textos h2{
 max-width:100%;margin:0!important;color:var(--cem23-green)!important;
 font-size:clamp(30px,3.05vw,53px)!important;line-height:1.12!important;
 font-weight:700!important;letter-spacing:-.022em;text-transform:uppercase;
 text-wrap:balance;
 text-shadow:2px 3px 1px rgba(255,255,255,.96),3px 4px 2px rgba(255,255,255,.57);
}
.cem23-textos p{
 max-width:610px;margin:0!important;color:#075b3c!important;
 font-size:clamp(17px,1.32vw,23px)!important;line-height:1.38!important;
 font-weight:600!important;text-wrap:pretty;
 text-shadow:2px 2px 1px rgba(255,255,255,.96),3px 3px 2px rgba(255,255,255,.55);
}
.cem23-btn{
 display:inline-flex;align-items:center;justify-content:center;
 min-width:178px;min-height:47px;margin:5px auto 0;padding:11px 26px;
 border:1px solid rgba(255,255,255,.3);border-radius:3px;
 background:#f5b939;color:#fff!important;text-shadow:0 1px 1px rgba(77,57,13,.32);
 text-decoration:none!important;font-size:15px!important;line-height:1.2!important;
 font-weight:800;letter-spacing:.035em;
 box-shadow:0 5px 18px rgba(35,41,31,.13);
 transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.cem23-btn:hover,.cem23-btn:focus-visible{background:#d99d25!important;color:#fff!important;box-shadow:0 8px 21px rgba(35,41,31,.22);transform:translateY(-2px)}
.cem23-btn:focus-visible,.cem23-flecha:focus-visible,.cem23-punto:focus-visible{outline:3px solid #fff!important;outline-offset:3px}
/* R3: flechas SVG propias; anular dimensiones y posiciones heredadas de WoodMart. */
section.cem23-carrusel button.cem23-flecha{
 appearance:none!important;-webkit-appearance:none!important;
 position:absolute!important;top:50%!important;bottom:auto!important;z-index:6;
 transform:translateY(-50%)!important;display:flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;width:48px!important;height:48px!important;
 min-width:0!important;min-height:0!important;max-width:48px!important;
 padding:0!important;margin:0!important;border:1px solid rgba(255,255,255,.82)!important;
 border-radius:50%!important;background:rgba(0,72,49,.43)!important;background-image:none!important;
 color:#fff!important;font-size:0!important;line-height:0!important;
 box-shadow:0 3px 14px rgba(0,0,0,.22)!important;cursor:pointer;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
 transition:background .18s ease,border-color .18s ease!important;
}
section.cem23-carrusel button.cem23-flecha::before,section.cem23-carrusel button.cem23-flecha::after{display:none!important;content:none!important}
section.cem23-carrusel button.cem23-prev{left:clamp(15px,2vw,40px)!important;right:auto!important}
section.cem23-carrusel button.cem23-next{right:clamp(15px,2vw,40px)!important;left:auto!important}
section.cem23-carrusel button.cem23-flecha svg{
 display:block!important;width:23px!important;height:23px!important;
 fill:none!important;stroke:currentColor!important;stroke-width:2.1!important;
 stroke-linecap:round!important;stroke-linejoin:round!important;pointer-events:none;
}
section.cem23-carrusel button.cem23-flecha:hover,
section.cem23-carrusel button.cem23-flecha:focus-visible{background:rgba(0,95,60,.92)!important;border-color:#fff!important}
/* R3: cuatro barras MUY finas, blancas, sin cuadrados verdes ni botón temático. */
section.cem23-carrusel .cem23-indicadores{
 position:absolute!important;bottom:clamp(20px,2vw,31px)!important;left:50%!important;right:auto!important;
 transform:translateX(-50%)!important;z-index:6;display:flex!important;align-items:center!important;
 justify-content:center!important;gap:9px!important;width:auto!important;height:auto!important;
 padding:8px 0!important;margin:0!important;background:transparent!important;
}
section.cem23-carrusel .cem23-indicadores button.cem23-punto{
 appearance:none!important;-webkit-appearance:none!important;position:relative!important;
 display:block!important;flex:0 0 31px!important;width:31px!important;height:3px!important;
 min-width:0!important;min-height:0!important;max-width:31px!important;max-height:3px!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:100px!important;
 background:rgba(255,255,255,.62)!important;background-image:none!important;
 box-shadow:0 1px 3px rgba(0,0,0,.3)!important;
 opacity:1!important;line-height:0!important;font-size:0!important;overflow:hidden!important;
 transition:background .2s ease,width .2s ease,flex-basis .2s ease!important;
 cursor:pointer;
}
section.cem23-carrusel .cem23-indicadores button.cem23-punto::before,
section.cem23-carrusel .cem23-indicadores button.cem23-punto::after{display:none!important;content:none!important}
section.cem23-carrusel .cem23-indicadores button.cem23-punto.es-activo{
 flex-basis:46px!important;width:46px!important;max-width:46px!important;
 background:#fff!important;box-shadow:0 1px 4px rgba(0,0,0,.45)!important;
}
section.cem23-carrusel .cem23-indicadores button.cem23-punto:hover{background:#fff!important}
@media(min-width:1500px){.cem23-textos{left:28%;width:42%}}
@media(min-width:768px) and (max-width:1050px){
 .cem23-textos{left:22%;width:56%;padding:18px 20px}
 .cem23-textos h2{font-size:clamp(28px,3.7vw,43px)!important}
 .cem23-textos p{font-size:clamp(16px,1.9vw,19px)!important}
}
@media(max-width:767px){
 .cem23-carrusel{height:clamp(480px,127vw,680px)}
 .cem23-fondo{object-position:50% 50%}
 .cem23-velo{background:linear-gradient(0deg,rgba(255,255,255,.91) 0%,rgba(255,255,255,.62) 26%,rgba(255,255,255,.1) 63%,transparent 85%)}
 .cem23-textos{left:7%;right:7%;bottom:77px;top:auto;transform:none;width:86%;max-width:none;padding:0;gap:10px}
 .cem23-textos h2{font-size:clamp(24px,6.5vw,35px)!important;line-height:1.11!important}
 .cem23-textos p{font-size:clamp(14px,3.75vw,18px)!important;line-height:1.34!important}
 .cem23-btn{margin-top:4px;min-height:44px;min-width:160px;font-size:13px!important}
 section.cem23-carrusel button.cem23-flecha{top:43%!important;width:39px!important;height:39px!important;max-width:39px!important}
 section.cem23-carrusel button.cem23-prev{left:10px!important}
 section.cem23-carrusel button.cem23-next{right:10px!important}
 section.cem23-carrusel button.cem23-flecha svg{width:19px!important;height:19px!important}
 section.cem23-carrusel .cem23-indicadores{bottom:20px!important;gap:7px!important}
 section.cem23-carrusel .cem23-indicadores button.cem23-punto{flex-basis:25px!important;width:25px!important;max-width:25px!important}
 section.cem23-carrusel .cem23-indicadores button.cem23-punto.es-activo{flex-basis:38px!important;width:38px!important;max-width:38px!important}
}
@media(max-width:390px){.cem23-textos{bottom:69px;left:9%;right:9%;width:82%}.cem23-textos h2{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){
 .cem23-slide.es-activa.es-entrante{animation:none!important}
 .cem23-btn,.cem23-flecha,.cem23-punto{transition:none!important}
}

/* R4: tipografia editorial institucional, sin las fuentes redondeadas del tema. */
.cem23-carrusel .cem23-textos h2,.cem23-carrusel .cem23-textos p,.cem23-carrusel .cem23-textos .cem23-btn{font-family:Arial,Helvetica,sans-serif!important;font-variant-ligatures:normal}

/* R4: en pantallas estrechas, mostrar la fotografía COMPLETA con su razón
   de aspecto nativa. Las cuatro láminas comparten una celda CSS Grid y
   contribuyen a la altura total, evitando espacios vacíos y recortes. */
@media(max-width:767px){
 section.cem23-carrusel{
  height:auto!important;max-height:none!important;min-height:0!important;
  aspect-ratio:auto!important;overflow:hidden!important;
  background:#f7f6f2!important;
 }
 section.cem23-carrusel .cem23-pistas{
  position:relative!important;inset:auto!important;
  width:100%!important;height:auto!important;min-height:0!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
 }
 section.cem23-carrusel .cem23-slide{
  position:relative!important;inset:auto!important;
  grid-column:1!important;grid-row:1!important;
  align-self:stretch!important;
  width:100%!important;height:auto!important;min-height:0!important;
  display:flex!important;flex-direction:column!important;
  background:#f7f6f2!important;
 }
 section.cem23-carrusel .cem23-fondo{
  position:relative!important;inset:auto!important;
  display:block!important;flex:0 0 auto!important;
  width:100%!important;height:auto!important;min-height:0!important;
  max-height:none!important;max-width:100%!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;object-position:center center!important;
  background:#efede9!important;
 }
 section.cem23-carrusel .cem23-velo{display:none!important}
 section.cem23-carrusel .cem23-textos{
  position:relative!important;inset:auto!important;top:auto!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  width:100%!important;max-width:none!important;height:auto!important;
  min-height:210px!important;flex:1 0 auto!important;
  padding:20px clamp(24px,8vw,42px) 58px!important;
  margin:0!important;gap:9px!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;
  text-align:center!important;
  background:linear-gradient(180deg,#f7f6f2 0%,#fff 100%)!important;
 }
 section.cem23-carrusel .cem23-textos h2{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  font-size:clamp(22px,5.8vw,29px)!important;
  line-height:1.17!important;letter-spacing:-.025em!important;
  text-wrap:balance!important;
 }
 section.cem23-carrusel .cem23-textos p{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:500!important;
  font-size:clamp(14px,3.65vw,16px)!important;
  line-height:1.4!important;letter-spacing:0!important;
  max-width:440px!important;
 }
 section.cem23-carrusel .cem23-btn{
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;font-size:13px!important;
  min-height:42px!important;min-width:158px!important;
  margin:4px auto 0!important;
  padding:10px 20px!important;
 }
 section.cem23-carrusel button.cem23-flecha{
  top:var(--cem23-mobile-image-mid,28vw)!important;
  width:36px!important;height:36px!important;max-width:36px!important;
  border-color:rgba(255,255,255,.95)!important;
  background:rgba(0,75,49,.58)!important;
 }
 section.cem23-carrusel button.cem23-prev{left:12px!important}
 section.cem23-carrusel button.cem23-next{right:12px!important}
 section.cem23-carrusel button.cem23-flecha svg{width:19px!important;height:19px!important}
 section.cem23-carrusel .cem23-indicadores{
  bottom:12px!important;gap:3px!important;padding:0!important;
 }
 /* Touch targets min 32 px; only the small central hairline is visible. */
 section.cem23-carrusel .cem23-indicadores button.cem23-punto,
 section.cem23-carrusel .cem23-indicadores button.cem23-punto.es-activo{
  position:relative!important;display:block!important;
  flex:0 0 36px!important;width:36px!important;height:32px!important;
  max-width:36px!important;max-height:32px!important;
  background:transparent!important;box-shadow:none!important;
  overflow:visible!important;border:0!important;border-radius:0!important;
 }
 section.cem23-carrusel .cem23-indicadores button.cem23-punto::before{
  display:block!important;content:""!important;
  position:absolute!important;top:50%!important;left:3px!important;
  width:30px!important;height:3px!important;
  border-radius:3px!important;transform:translateY(-50%)!important;
  background:rgba(0,90,57,.27)!important;
  box-shadow:none!important;
 }
 section.cem23-carrusel .cem23-indicadores button.cem23-punto.es-activo::before{
  background:#006c43!important;
 }
 section.cem23-carrusel .cem23-indicadores button.cem23-punto::after{display:none!important;content:none!important}
}
@media(max-width:360px){
 section.cem23-carrusel .cem23-textos{padding-left:20px!important;padding-right:20px!important}
 section.cem23-carrusel .cem23-textos h2{font-size:21px!important}
}