:root{
  --canvas: 880px;
}
*{box-sizing:border-box;}
.rosario-wrapper{max-width:100%;margin:14px auto 100%;display:flex;flex-direction:column;gap:16px;font-family:'Merriweather',serif;}
.rosario-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
.rosario-controles{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:absolute;}
.rosario-toggle{font-size:13px;display:flex;align-items:center;gap:6px;}
.rosario-card{padding:20px;border:1px solid #ddd;border-radius:15px;box-shadow:0 2px 14px rgba(0,0,0,.08);background:#fff;display:flex;flex-direction:column;gap:16px;align-items:center;position:relative;z-index:0;min-height:1540px;}
.rosario-inner-text{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:58%;max-height:40%;overflow-y:auto;text-align:center;z-index:10;padding:12px 16px;background:rgba(255,255,255,0.92);border-radius:13px;box-shadow:0 1px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:6px;pointer-events:auto;}
.rosario-etapa{font-weight:700;font-size:18px;}
.rosario-texto{line-height:1.55;white-space:pre-wrap;font-size:18px;}
.rosario-progreso{font-size:13px;opacity:.7;}
.rosario-visual{width:min(96vw,var(--canvas));height:min(110vw,1100px);margin:0 auto 8px auto;display:grid;place-items:center;position:relative;cursor:pointer;}
.rosary{margin-top:10%;position:relative;width:100%;height:100%;background:transparent;}
.rosary::before{display:none;}
.part{position:absolute;left:0;top:0;transform-origin:center center;user-select:none;-webkit-user-drag:none;pointer-events:none;image-rendering:auto;}
.part.bead{z-index:2;}
.part.bead.small{width:86px;height:auto;}
.part.bead.large{width:145px;height:auto;}
.part.medal{margin-left:0px;margin-top:1%;width:115px;height:auto;background:transparent;z-index:2;}
.part.cross{width:150px;height:auto;background:transparent;z-index:2!important;}
.part.chain{width:86px;height:auto;opacity:0.95;z-index:-1;}
.part.active{filter:drop-shadow(0 0 6px rgba(47,123,60,.7)) saturate(1.1);transform:scale(1.15);z-index:3;}
.part.done{filter:grayscale(.8) brightness(1.05);opacity:.7;}
.rosario-detalles{font-size:14px;}

@media (max-width: 768px){
  .rosario-wrapper{
    margin:10px auto 24px;
    gap:12px;
    padding:0 8px;
  }
  .rosario-card{
    min-height:auto;
    padding:14px;
    gap:12px;
  }
  .rosario-visual{
    width:100%;
    height:min(145vw,880px);
    margin:0;
  }
  .rosary{
    margin-top:4%;
  }
  .rosario-inner-text{
    top:40%;
    width:60%;
    max-height:30%;
    padding:10px 12px;
  }
  .rosario-etapa{font-size:16px;}
  .rosario-texto{font-size:14px;line-height:1.45;}
  .rosario-progreso{font-size:12px;}

  .rosario-controles{
    position:static;
    width:100%;
    justify-content:center;
    gap:8px;
  }
  .rosario-toggle{font-size:12px;}

  .part.bead.small{width:56px;}
  .part.bead.large{width:92px;}
  .part.medal{width:82px;margin-top:0;}
  .part.cross{width:110px;}
  .part.chain{width:90px;}
}