/* =========================================================================
   Accesos en Slider — WebsMéxico
   Cada slider recibe sus variables en el atributo style:
   --wmacc-h / --wmacc-sf      tono del botón y factor de saturación (0 = gris)
   --wmacc-size / --wmacc-icon tamaño del botón y proporción del icono
   --wmacc-nd / -nt / -nm      botones visibles escritorio / tablet / móvil
   --wmacc-gap                 separación
   --wmacc-txt-*               color, tamaño y grosor del texto
   --wmacc-arrow / -arrow-bg   color y fondo de flechas
   ========================================================================= */

/* ---------- Contenedor ---------- */
.wmacc{
  --wmacc-n:var(--wmacc-nd, 4);
  position:relative;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  contain:inline-size;            /* su ancho no depende del contenido: nunca desborda la página */
  padding:0 40px;
}
.wmacc.wmacc-sin-desborde{padding:0}

.wmacc-track{
  display:flex;
  flex-wrap:nowrap;
  gap:var(--wmacc-gap, 12px);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:6px 0 8px;               /* aire para la sombra del botón */
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.wmacc-track::-webkit-scrollbar{display:none}
.wmacc.wmacc-sin-desborde .wmacc-track{justify-content:center}

/* ---------- Cada acceso ---------- */
.wmacc .wmacc-item{
  flex:0 0 calc((100% - (var(--wmacc-n) - 1) * var(--wmacc-gap, 12px)) / var(--wmacc-n));
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  scroll-snap-align:start;
  text-decoration:none !important;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.wmacc .wmacc-item:focus-visible{outline:2px solid hsl(var(--wmacc-h, 150), calc(70% * var(--wmacc-sf, 1)), 36%); outline-offset:4px; border-radius:8px}

/* ---------- Botón (aro metálico + centro de color) ---------- */
.wmacc .wmacc-btn{
  position:relative;
  flex:none;
  display:grid;
  place-items:center;
  width:var(--wmacc-size, 60px);
  height:var(--wmacc-size, 60px);
  border-radius:50%;
  background:conic-gradient(from 200deg,#f6f6f6,#8c9195,#eceff0,#767b80,#fbfbfb,#8c9195,#f6f6f6);
  box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.6);
  transition:transform .12s, filter .12s;
}
.wmacc .wmacc-btn::before{
  content:"";
  position:absolute;
  top:7%; right:7%; bottom:7%; left:7%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,
    hsl(var(--wmacc-h, 150), calc(65% * var(--wmacc-sf, 1)), 58%),
    hsl(var(--wmacc-h, 150), calc(62% * var(--wmacc-sf, 1)), 46%) 62%,
    hsl(var(--wmacc-h, 150), calc(70% * var(--wmacc-sf, 1)), 36%));
  box-shadow:
    inset 0 0 0 2px hsla(var(--wmacc-h, 150), calc(80% * var(--wmacc-sf, 1)), 28%, .35),
    inset 0 -8px 14px hsla(var(--wmacc-h, 150), calc(85% * var(--wmacc-sf, 1)), 72%, .55),
    inset 0 4px 8px rgba(0,0,0,.25);
}
.wmacc .wmacc-btn::after{
  content:"";
  position:absolute;
  top:11%; left:24%; right:24%;
  height:36%;
  border-radius:50%;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0));
  pointer-events:none;
  z-index:3;
}
.wmacc .wmacc-icon{
  position:absolute !important;
  z-index:2;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%);
  width:calc(var(--wmacc-size, 60px) * var(--wmacc-icon, .7)) !important;
  height:calc(var(--wmacc-size, 60px) * var(--wmacc-icon, .7)) !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  object-fit:contain;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
  pointer-events:none;
}
.wmacc .wmacc-inicial{
  position:relative;
  z-index:2;
  color:#fff;
  font-weight:700;
  font-size:calc(var(--wmacc-size, 60px) * .42);
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}
.wmacc .wmacc-item:hover .wmacc-btn{filter:brightness(1.08)}
.wmacc .wmacc-item:active .wmacc-btn{transform:scale(.95); filter:brightness(.92)}

/* ---------- Texto ---------- */
.wmacc .wmacc-label{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:calc(100% + var(--wmacc-gap, 12px));   /* puede usar el espacio de separación */
  max-width:none;
  color:var(--wmacc-txt-color, #1d3b2a);
  font-size:var(--wmacc-txt-size, 16px);
  font-weight:var(--wmacc-txt-weight, 700);
  line-height:1.15;
  text-align:center;
  overflow-wrap:break-word;                    /* solo corta una palabra si no cabe completa */
  hyphens:auto;
}

/* Tipografía elegida en el slider (si no, se hereda la del tema) */
.wmacc[data-fuente] .wmacc-label{font-family:var(--wmacc-txt-font)}

/* ---------- Flechas (con !important para que no las pise el tema o el Kit de Elementor) ---------- */
.wmacc .wmacc-flecha{
  position:absolute !important;
  top:calc(6px + var(--wmacc-size, 60px) / 2) !important;   /* centradas con el botón, no con el texto */
  bottom:auto !important;
  transform:translateY(-50%);
  z-index:5;
  display:grid !important;
  place-items:center;
  box-sizing:border-box !important;
  width:32px !important;
  height:32px !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--wmacc-arrow-bg, #fff) !important;
  color:var(--wmacc-arrow, #1b5e3b) !important;
  font-family:Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  text-decoration:none !important;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
  cursor:pointer;
  transition:filter .12s, transform .12s;
}
.wmacc .wmacc-flecha:hover,
.wmacc .wmacc-flecha:focus,
.wmacc .wmacc-flecha:active{
  background:var(--wmacc-arrow-bg, #fff) !important;
  color:var(--wmacc-arrow, #1b5e3b) !important;
  border:0 !important;
}
.wmacc .wmacc-flecha:hover{filter:brightness(.95)}
.wmacc .wmacc-flecha:active{transform:translateY(-50%) scale(.92)}
.wmacc .wmacc-flecha:focus-visible{outline:2px solid var(--wmacc-arrow, #1b5e3b) !important; outline-offset:2px}
.wmacc .wmacc-flecha[hidden]{display:none !important}
.wmacc .wmacc-prev{left:4px !important; right:auto !important}
.wmacc .wmacc-next{right:4px !important; left:auto !important}

/* ---------- Aviso (solo editores) ---------- */
.wmacc-aviso{
  padding:10px 14px;
  border:1px dashed #c3c4c7;
  border-radius:6px;
  background:#fcf9e8;
  color:#50575e;
  font-size:14px;
}

/* ---------- Tablet (breakpoint de Elementor) ---------- */
@media (max-width:1024px){
  .wmacc{--wmacc-n:var(--wmacc-nt, 4)}
}

/* ---------- Móvil (breakpoint de Elementor) ---------- */
@media (max-width:767px){
  .wmacc{--wmacc-n:var(--wmacc-nm, 4); padding:0 30px}
  .wmacc .wmacc-label{font-size:var(--wmacc-txt-size-m, var(--wmacc-txt-size, 16px))}
  .wmacc.wmacc-sin-desborde{padding:0}
  .wmacc .wmacc-flecha{width:26px !important; height:26px !important; font-size:13px !important}
  .wmacc .wmacc-prev{left:2px !important}
  .wmacc .wmacc-next{right:2px !important}
}

@media (prefers-reduced-motion:reduce){
  .wmacc-track{scroll-behavior:auto}
  .wmacc .wmacc-btn{transition:none}
}