/* ========= Sección: imagen full width ========= */
.section-fullimg img{
  display:block;
  width:100%;       /* ocupa todo el ancho del container */
  height:auto;
  border-radius:.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

/* ========= Sección: imagen en círculo ========= */
.section-circle figure{
  width: clamp(180px, 40vw, 380px);
  aspect-ratio: 1/1;
  margin: 0 auto 1rem;
  border-radius: 50%;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

.section-circle img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* ========= Sección: imagen lateral básica ========= */
.section-sideimg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ========= Contenedor float-img ========= */
.content-floatimg {
  position: relative;
  display: flow-root; /* evita colapso con floats */
}

/* Base imagen flotada */
.content-floatimg .floatimg {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: var(--img-max, 50%); /* valor dinámico: 30%, 50%, 70% */
  height: auto;
  object-fit: cover;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

/* Imagen a la izquierda */
.content-floatimg.left .floatimg {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

/* ======== Forma: rectangular ======== */
.content-floatimg.shape-rect .floatimg{
  border-radius: .5rem;
  clip-path: none;
  aspect-ratio: auto;
}

/* ======== Forma: circular ======== */
.content-floatimg.shape-circle .floatimg{
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  object-fit: cover;
}

/* ========= Responsive ========= */
@media (max-width: 768px) {
  .content-floatimg .floatimg {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    max-width: 100%;
  }
}