/* SAI WATER · rotador de fotos (24-oct-2026). Lo mueve activos/rotador/rotador.js; los ajustes de cada lugar (proporción,
   bordes, color del pie) van en la página, en su <style id="rot-…">.
   - Cada foto es un <figure class="rot-foto"> con su <img> (sola o dentro de <picture>, para un recorte en celular), su alt y su pie, todas en el HTML (Google las ve todas).
   - Todas ocupan la MISMA celda de la rejilla y comparten filas (subgrid): el cuadro de la foto tiene proporción fija
     (--rot-prop) y la fila del pie mide lo que el pie más largo. Cambiar de foto no mueve nada de la página (CLS 0).
   - Sin JavaScript se ve solo la primera foto, completa, con su pie; los controles no aparecen.
   - Las <img> de la 2.ª en adelante van con loading="lazy" y escondidas (display:none) hasta que el programa las pide
     (clase rot-pedida): un <img> perezoso escondido no se descarga, así que al abrir la página solo baja la primera. (Sin
     JavaScript el navegador no aplica loading="lazy", por norma, y las baja todas, aunque solo muestra la primera.)
   - Fundido: la que entra sube rápido y la que sale baja lento, para que entre las dos casi no se vea el fondo. */
.rot{position:relative;min-width:0}
.rot-pista{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
.rot-foto{grid-column:1;grid-row:1/3;display:grid;grid-template-rows:subgrid;margin:0;min-width:0}
.rot-marco{grid-row:1;position:relative;box-sizing:border-box;overflow:hidden;aspect-ratio:var(--rot-prop,4/3)}
.rot .rot-marco img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  object-fit:var(--rot-ajuste,cover);object-position:var(--rot-pos,50% 50%)}
.rot-foto>figcaption{grid-row:2;min-width:0;text-wrap:balance}
.rot-foto:not(:first-child) .rot-marco img:not(.rot-pedida){display:none}

/* estados: la primera se ve antes de que corra el programa; después, solo la que lleva es-actual */
.rot-foto:not(:first-child){visibility:hidden}
.rot-foto:not(:first-child)>*{opacity:0}
.rot--listo .rot-foto{visibility:hidden;transition:visibility 0s linear .8s}
.rot--listo .rot-foto>*{opacity:0;transition:opacity .8s cubic-bezier(.55,0,.85,.35)}
.rot--listo .rot-foto.es-actual{visibility:visible;transition-delay:0s}
.rot--listo .rot-foto.es-actual>*{opacity:1;transition:opacity .8s cubic-bezier(.15,.65,.35,1)}

/* controles, debajo del pie (fuera de la región que avisa): flechas, puntos («Foto 2 de 3») y pausa, de 44 x 44 px */
.rot-ctrl{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:2px 0 0;
  color:var(--rot-color,#174FCC)}
.rot-ctrl button{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;border:0;
  border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-grid;place-items:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.rot-ctrl button::before{content:"";display:block;box-sizing:border-box;transition:background-color .2s,transform .2s,opacity .2s}
.rot-punto::before{width:11px;height:11px;border-radius:50%;border:2px solid currentColor;opacity:.8}
.rot-punto[aria-current="true"]::before{background:currentColor;opacity:1;transform:scale(1.18)}
.rot-ant::before,.rot-sig::before{width:10px;height:10px;border:solid currentColor;border-width:0 0 2.5px 2.5px;transform:translateX(2px) rotate(45deg)}
.rot-sig::before{transform:translateX(-2px) rotate(-135deg)}
.rot-ctrl .rot-pausa{margin-left:6px}
.rot-pausa::before{width:11px;height:13px;border:solid currentColor;border-width:0 3.5px}
.rot-pausa[data-rot-estado="detenido"]::before{width:0;height:0;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;transform:translateX(2px)}
.rot-ctrl button:hover{background:var(--rot-hover,rgba(23,79,204,.09))}
.rot-ctrl button:focus{outline:none}
.rot-ctrl button:focus-visible{outline:3px solid var(--rot-foco,#0091E2);outline-offset:-4px}

/* foto de fondo (portadas): las fotos llenan el bloque; el pie y los controles van abajo, encima del velo */
.rot.rot--fondo{position:absolute;inset:0}
.rot--fondo .rot-pista{position:absolute;inset:0;display:block}
.rot--fondo .rot-foto{position:absolute;inset:0;display:block}
.rot--fondo .rot-marco{position:absolute;inset:0;aspect-ratio:auto}
.rot--fondo .rot-foto>figcaption{position:absolute;z-index:2}
.rot--fondo .rot-ctrl{position:absolute;z-index:3;margin:0}
/* en las portadas el pie y los controles aparecen después del evento load: así no se mueven con el reacomodo del primer diseño de la
   portada (cambio de letra), que no es del rotador */
@media (scripting:enabled){.rot--fondo:not(.rot--cargado) .rot-ctrl,.rot--fondo:not(.rot--cargado) .rot-foto>figcaption{visibility:hidden}}

@media (scripting:none){
  .rot-foto:not(:first-child),.rot-ctrl{display:none}
  .rot-foto:first-child{visibility:visible}
  .rot-foto:first-child>*{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .rot--listo .rot-foto,.rot--listo .rot-foto>*,.rot--listo .rot-foto.es-actual>*{transition:none}
  .rot-ctrl .rot-pausa{display:none}
}
@media print{
  .rot .rot-ctrl{display:none}
}